고정 너비 컨테이너에 부트스트랩 그리드 열이 쌓이는 것을 방지하는 방법은 무엇입니까?

고정 래퍼를 사용하여 Bootstrap 그리드에서 스택킹을 방지하는 방법

Bootstrap에서 그리드 시스템을 사용하면 뷰포트 너비에 따라 열이 반응적으로 스택될 수 있습니다. . 그러나 이 동작은 고정 너비 컨테이너를 사용하는 경우와 같은 특정 시나리오에서는 바람직하지 않을 수 있습니다.

고정 너비 컨테이너에 열이 쌓이는 것을 방지하려면 비 쌓임 클래스를 사용해야 합니다.

Bootstrap 3에서 col-xs-* 사용

Bootstrap 3에서는 col-xs-* 클래스를 사용하여 쌓이지 않는 열을 정의해야 합니다. xs(초소형) 중단점은 가장 작은 화면 크기를 나타내며 가장 극단적인 해상도에서 동작을 제어하는 ​​데 사용됩니다.

예:

<code class="html"><div class="container-fixed">
  <div class="row">
    <div class="col-xs-4">.col-xs-4</div>
    <div class="col-xs-4">.col-xs-4</div>
    <div class="col-xs-4">.col-xs-4</div>
  </div>
</div></code>

col-* 사용 Bootstrap 4의 경우

Bootstrap 4에서는 col-xs-* 클래스가 더 이상 필요하지 않습니다. 대신 중단점 접두사가 없는 col-* 클래스를 직접 사용하여 쌓이지 않는 열을 정의할 수 있습니다.

<code class="html"><div class="container-fluid">
  <div class="row">
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
  </div>
</div></code>

구현

적절한 비- 클래스를 그리드 시스템에 스택하면 브라우저 창 크기가 조정될 때 열이 스택되는 것을 효과적으로 방지하여 레이아웃이 고정 너비 컨테이너 내에서 그대로 유지되도록 할 수 있습니다.

위 내용은 고정 너비 컨테이너에 부트스트랩 그리드 열이 쌓이는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!