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

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

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

문제:

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

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

고정 너비 컨테이너에 열이 쌓이는 것을 방지하기 위해 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!