Bootstrap의 그리드 시스템과 함께 고정 래퍼를 사용할 때 열이 쌓이는 것을 방지하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

Bootstrap의 그리드 시스템과 함께 고정 래퍼를 사용할 때 열이 쌓이는 것을 방지하는 방법은 무엇입니까?

Patricia Arquette

풀어 주다： 2024-11-03 06:25:30

원래의

524명이 탐색했습니다.

How to Prevent Columns from Stacking When Using a Fixed Wrapper with Bootstrap's Grid System?

고정 래퍼와 결합된 부트스트랩 그리드 시스템 - 열 스태킹 방지

문제:

부트스트랩 3 그리드 시스템을 결합하여 사용하는 경우 래퍼가 고정되어 있으므로 래퍼가 동일한 크기를 유지하더라도 브라우저 창의 크기가 변경되면 열이 함께 쌓입니다.

답변:

Bootstrap의 sm, md, lg와 같은 열은 응답적으로 래핑/스택됩니다. 비적층 열을 사용하려면 col-xs-* 클래스를 사용할 수 있습니다.

<code class="html"><div class="container">
  <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>

로그인 후 복사

데모: http://bootply.com/80085

참고: Bootstrap 4에서는 더 이상 필요하지 않습니다. xs를 지정하십시오.

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

로그인 후 복사

위 내용은 Bootstrap의 그리드 시스템과 함께 고정 래퍼를 사용할 때 열이 쌓이는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!