Bootstrap 4 소형 그리드

소형 장치(화면 너비가 576픽셀에서 767픽셀까지)에 적층되어 시작하여 더 큰 장치에서 수평이 되는 기본 그리드 시스템을 만들어보자.

소형 그리드

예제 1

두 개의 열로 구성된 간단한 레이아웃이 있다고 가정한다.
소형, 중형, 대형 및 초대형 장치에서 25%/75% 분할이 발생한다.
초소형 장치에서는 자동으로 스택(100%)된다.

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 bg-success">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 bg-warning">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

33.3%/66.6% 분할의 경우 .col-sm-4 및 .col-sm-8을 사용한다.
50%/50% 분할의 경우 .col-sm-6 및 .col-sm-6을 사용한다.

예제 2

<!-- 33.3/66.6% split: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 bg-success">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-8 bg-warning">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

<!-- 50%/50% split: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-success">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6 bg-warning">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

자동 레이아웃 열

Bootstrap 4에서는 모든 장치에 대해 동일한 너비 열을 만드는 쉬운 방법이 있다.
.col-sm-*에서 숫자를 제거하고 지정된 수의 col 요소에 대해서만 .col-sm 클래스를 사용한다.
부트스트랩은 열의 개수를 인식하고 각 열은 동일한 너비를 갖게 된다.

화면 크기가 576px 미만인 경우 열이 수평으로 쌓인다.

예제

<!-- Two columns: 50% width on all screens, except for extra small (100% width) -->
<div class="row">
  <div class="col-sm">1 of 2</div>
  <div class="col-sm">2 of 2</div>
</div>

<!-- Four columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
  <div class="col-sm">1 of 4</div>
  <div class="col-sm">2 of 4</div>
  <div class="col-sm">3 of 4</div>
  <div class="col-sm">4 of 4</div>
</div>

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기