푸시 및 풀을 사용하여 .col-*-12로 부트스트랩 열을 재정렬할 수 있습니까?

Push 및 Pull을 사용하여 .col-*-12로 Bootstrap 열 재구성

Bootstrap 그리드 레이아웃 영역에서 인스턴스가 발생할 수 있습니다. 작은 화면(모바일 장치)에서 .col-xs-12 클래스를 사용하여 열 순서를 변경해야 하는 경우. 이 시나리오에서는 전통적인 push 및 pull 지시문이 직접적인 솔루션을 제공하지 못할 수 있다는 점을 이해하는 것이 중요합니다.

Push/Pull을 사용하여 .col-*-12로 열을 다시 정렬할 수 있습니까?

아니요, .col--push-12 및 .col-*-pull-12 클래스를 사용하여 .col--12 열을 재정렬할 수 없습니다. 이는 이러한 열의 결합된 너비가 정의된 12열 그리드를 초과하기 때문입니다.

.col-*-12 열 재정렬을 위한 대체 접근 방식:

• 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>

• CSS 변환으로 세로 열 순서 뒤집기: 이 방법에는 CSS 변환을 사용하여 작은 화면에서 열 순서를 회전시키는 작업이 포함됩니다.

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

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

참고: CSS 변환은 IE9 이상에서 지원되지만 브라우저 간 호환성을 위해 공급업체 접두사를 포함해야 합니다.

위 내용은 푸시 및 풀을 사용하여 .col-*-12로 부트스트랩 열을 재정렬할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!