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

Bootstrap 그리드 시스템: 고정 래퍼로 열 스태킹 극복

Bootstrap의 그리드 시스템은 반응형 레이아웃을 만들기 위한 웹 디자인의 기본 구성 요소입니다. 그러나 고정 너비 컨테이너를 사용하는 경우 더 작은 브라우저 크기에서 그리드 내의 열이 수직으로 쌓일 수 있습니다.

문제:

고정 너비 래퍼를 사용하는 경우 Bootstrap 3에서는 래퍼 자체가 동일하게 유지되더라도 브라우저 창의 크기가 조정되면 그리드 열이 붕괴되어 서로 쌓이게 됩니다. size.

해결책: 비스태킹 클래스 사용

열이 고정 너비 컨테이너에 쌓이는 것을 방지하기 위해 Bootstrap은 "비스태킹" 클래스 세트를 제공합니다. . 이러한 클래스는 미디어 쿼리를 사용하여 특정 화면 해상도에서 기본 스태킹 동작을 재정의합니다.

Bootstrap 3에서 비스태킹 클래스에는 col-xs- 접두사가 붙습니다. 이러한 클래스는 열에 적용되어 더 작은 화면 크기에서 축소되는 것을 방지할 수 있습니다.

예:

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

이 예에서 열은 옆으로 유지됩니다. 가장 작은 화면 크기에서도 나란히.

Bootstrap 4 업데이트:

Bootstrap 4에서는 스택되지 않는 클래스의 개념이 단순화되었습니다. xs 접두사는 더 이상 필요하지 않습니다. 대신 기본 동작은 열 스택을 방지하는 것입니다. 열이 나란히 유지되도록 하려면 표준 col 클래스(예: col-4)를 사용하면 됩니다.

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