더 작은 화면 크기에서만 Bootstrap 3의 열을 밀거나 당기는 방법은 무엇입니까?

Bootstrap 3: 더 작은 화면 크기에서만 열을 밀고 당기는 방법

Bootstrap은 열을 밀고 당겨서 크기를 조정하는 기능을 제공합니다. 화면 크기에 따른 레이아웃. 그러나 때로는 큰 화면에서 열 위치를 유지하면서 작은 화면 크기에서만 열을 밀거나 당기고 싶은 상황이 발생할 수 있습니다.

다음 HTML 구조를 고려하세요.

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

이 레이아웃은 큰 화면에서는 다음과 같이 나타납니다.

|    1    |  2  |  3  |  4  |    5    |

그러나 작은 화면에서는 다른 레이아웃을 원합니다.

|        1        |        5        |
|     2     |     3     |     4     |

해결책:

이를 달성하려면 '모바일 우선' 사고로 문제에 접근해야 합니다. 먼저 가장 작은 화면 크기에 맞게 레이아웃을 구성한 다음 푸시/풀 클래스를 사용하여 더 큰 화면에서 열을 원하는 위치로 이동하세요.

업데이트된 HTML:

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

큰 화면과 작은 화면 모두에 대한 열 클래스를 동일한 태그에 배치하면 먼저 태블릿에서 열이 원하는 순서로 배치되도록 할 수 있습니다. 그런 다음 푸시/풀 클래스를 사용하여 데스크탑에서 위치를 조정합니다.

이 업데이트된 코드는 모든 화면 크기에서 원하는 레이아웃을 제공합니다.

대형 화면:

|    1    |        5        |     2     |     3     |     4     |

작은 화면:

|        1        |        5        |
|     2     |     3     |     4     |

위 내용은 더 작은 화면 크기에서만 Bootstrap 3의 열을 밀거나 당기는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!