Bootstrap 3에서 반응형 푸시/풀 열 동작을 달성하는 방법은 무엇입니까?

Bootstrap 3에서 열 밀기 및 당기기

반응형 레이아웃을 디자인할 때 더 작은 화면 크기에서 열을 다시 정렬하거나 수정해야 하는 경우가 많습니다. Bootstrap 3은 열 너비 조정을 위한 col-xs-6과 같은 클래스를 제공하지만 특정 중단점에서 열을 밀거나 당기는 것을 직접 지원하지는 않습니다.

반응형 밀기/끌기 달성

작은 화면에서 원하는 밀기/당기기 동작을 달성하려면 직관에 반하는 접근 방식인 '모바일 우선'을 사용할 수 있습니다. 선호하는 col-xs-* 클래스를 사용하여 작은 화면에 대해 원하는 레이아웃을 정의한 다음 col-lg-push-* 또는 col-lg-pull-*와 함께 col-lg-* 클래스를 적용하여 큰 화면에 열을 배치합니다.

예를 들어 질문에 명시된 레이아웃을 모방하려면:

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

이렇게 하면 열이 작은 화면에 지정된 순서대로 표시되고, 큰 데스크톱에서는 col을 통해 위치가 조정됩니다. -lg-* 클래스. 기본적으로 이 접근 방식에는 데스크톱 레이아웃으로 시작하여 모바일에 맞게 조정하는 일반적인 프로세스가 거꾸로 포함됩니다.

위 내용은 Bootstrap 3에서 반응형 푸시/풀 열 동작을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!