Push/Pull Bootstrap 3열을 사용하여 작은 화면에 맞는 다양한 레이아웃을 만드는 방법은 무엇입니까?

작은 화면에서만 Bootstrap 3개 열 푸시/풀

반응형 디자인 영역에서는 화면 크기에 따른 요소. Bootstrap 3은 열 순서와 위치를 동적으로 조정하기 위한 푸시 및 풀 유틸리티를 제공합니다.

이러한 경우 중 하나는 더 큰 데스크탑에서 원래 레이아웃을 유지하면서 작은 화면에서 다른 열 배열을 유지하려는 경우입니다. 다음 예를 고려하십시오.

초기 레이아웃:

<code class="html"><div class="col-lg-3">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
<div class="col-lg-3">5</div></code>

작은 화면에서 원하는 레이아웃:

<code class="html"><div class="col-xs-6">1</div>
<div class="col-xs-6">5</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
<div class="col-xs-4">4</div></code>

해결책:

이 레이아웃을 구현하려면 다음 접근 방식을 활용할 수 있습니다.

<code class="html"><div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-3 col-xs-6 col-lg-push-6">5</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">2</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">3</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">4</div></code>

이 솔루션은 더 작은 항목의 열 순서와 위치를 설정하여 모바일 레이아웃의 우선 순위를 지정합니다. 스크린. 그런 다음 더 큰 데스크톱에서는 푸시 및 풀 유틸리티를 적용하여 열을 원하는 데스크톱 레이아웃으로 다시 정렬합니다.

이 접근 방식을 사용하면 원하는 열 배열을 유지하면서 다양한 화면 크기에 적응하는 유연하고 반응성이 뛰어난 레이아웃이 가능합니다.

위 내용은 Push/Pull Bootstrap 3열을 사용하여 작은 화면에 맞는 다양한 레이아웃을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!