Bootstrap의 Push/Pull 클래스가 모바일 장치에서 동일한 크기의 열을 재정렬할 수 있습니까?

푸시/풀을 사용한 부트스트랩 열 재정렬: 제한 사항 및 대체 접근 방식

동일한 크기(.col-*-12)의 열을 처리할 때 일반적인 쿼리가 발생합니다. Bootstrap의 push 및 pull 지시문을 사용하여 순서를 변경하는 가능성에 대해 설명합니다. 이 쿼리의 목적은 모바일 화면 크기의 기기에서 두 개의 열 배치를 바꾸는 것이 가능한지 이해하는 것입니다.

푸시/풀의 제한 사항

안타깝게도 순서를 바꾸는 것은 불가능합니다. .col-*-12 푸시 및 풀 클래스를 사용하는 열. 이는 이러한 열의 합이 Bootstrap의 @grid-columns 변수에 지정된 사전 정의된 그리드 크기인 12개 열을 초과하기 때문입니다.

대체 접근 방식

재정렬을 원하는 경우 다음 대안을 고려하십시오.

1. 큰 화면에서 HTML 구조 수정 및 밀기/끌기 사용:

HTML 내의 열을 다시 정렬하고 밀기/끌기 클래스를 적용하여 큰 화면에서 원하는 순서를 얻습니다. 예를 들면 다음과 같습니다.

<code class="html"><div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-push-6">
    <p>test2</p>
  </div>

  <div class="col-xs-12 col-sm-6 col-sm-pull-6">
    <p>test1</p>
  </div>
</div></code>

2. 모바일에서 CSS 변환을 사용하여 열 순서 바꾸기:

화면 크기가 767px 이하인 기기에서 세로로 쌓인 열의 순서를 바꾸려면 다음 CSS를 적용하세요.

<code class="css">@media (max-width: 767px) {
  .row.reorder-xs {
    transform: rotate(180deg);
    direction: rtl; /* Fix horizontal alignment */
  }

  .row.reorder-xs > [class*="col-"] {
    transform: rotate(-180deg);
    direction: ltr; /* Fix horizontal alignment */
  }
}</code>

이 접근 방식을 사용하려면 재정렬하려는 열과 관련된 HTML 클래스를 사용해야 합니다.

위 내용은 Bootstrap의 Push/Pull 클래스가 모바일 장치에서 동일한 크기의 열을 재정렬할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!