푸시/풀을 사용하여 부트스트랩에서 .col-*-12 열을 재정렬하는 방법은 무엇입니까?

Bootstrap에서 .col-*-12에 대해 Push/Pull을 사용하여 열 재정렬

Bootstrap에서 push 및 pull 지시문 클래스는 다음과 같습니다. 주변 기둥을 기준으로 기둥 배치를 조정하는 데 사용됩니다. 그러나 너비가 12인 열(예: .col-*-12)의 경우 밀기/끌어오기가 순서를 직접 변경할 수 없다는 점에 유의하는 것이 중요합니다.

그 이유는 너비의 합이 두 열 중 Bootstrap에서 지정한 기본 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 변환 사용

또는 작은 화면에서 열이 수직으로 쌓일 때 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>

CSS에 유의하세요. 변환은 IE9 이상에서 지원되므로 호환성을 위해 공급업체 접두사를 포함해야 할 수도 있습니다.

위 내용은 푸시/풀을 사용하여 부트스트랩에서 .col-*-12 열을 재정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!