푸시/풀 클래스를 사용하여 부트스트랩에서 .col-*-12 열을 재정렬할 수 있습니까?

.col-*-12 열에 대해 부트스트랩 푸시/풀을 사용하여 열 순서 변경

문제:

목표 push/pull 지시문을 사용하여 모바일 장치의 Bootstrap에서 두 개의 동일한 크기 열(.col-xs-12)을 순서를 반대로 재정렬합니다. 그러나 이 접근 방식이 이 크기의 열에 실행 가능한지 의문이 듭니다.

해결 방법:

푸시/풀 제한:

푸시 및 풀 지시문은 다양한 화면 크기에 따라 열 순서를 변경하도록 설계되었지만 제한이 있습니다. 전체 12열 그리드(.col-*-12)를 차지하는 열을 재배열하는 것은 이러한 도우미로는 불가능합니다.

대체 접근 방식:

1. HTML 순서 재정렬: HTML에서 열 순서를 수동으로 재정렬하고 더 넓은 화면에서 푸시/풀 클래스를 적용하여 원하는 레이아웃을 유지할 수 있습니다.

2. CSS 변환 트릭:

   • 행 컨테이너에 CSS 변환을 구현하여 효과적으로 열 순서를 반대로 바꿉니다.
   • 변환과 함께 방향 수정자를 사용하여 적절한 가로 정렬을 보장하세요.
   • 공급업체 접두사가 있는 IE9에서는 변환이 지원됩니다.

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