동일한 너비의 부트스트랩 열에 푸시/풀 클래스를 사용할 수 있습니까?

동일 너비 요소에 대해 Push/Pull을 사용하여 Bootstrap 열 재정렬

Bootstrap의 그리드 시스템으로 작업할 때 열 순서를 조정하는 것이 중요합니다. 반응형 레이아웃을 위한 것입니다. 그러나 push/pull 지시문을 사용하여 동일한 크기의 열을 다시 정렬하는 것은 어려울 수 있습니다.

Push/Pull을 .col-*-12 요소에 사용할 수 있습니까?

아니요, ".col-xs-12.col-xs-push-12"와 같은 클래스가 있는 열의 순서를 변경할 수 없습니다. ".col-xs-12.col-xs-pull-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;
  }

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

참고: CSS 변환은 다음과 같습니다. 공급업체 접두사를 사용하여 IE9에서 지원됩니다.

위 내용은 동일한 너비의 부트스트랩 열에 푸시/풀 클래스를 사용할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!