Bootstrap 4 초소형 그리드

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

초소형 그리드

예제 1

두 개의 열로 구성된 간단한 레이아웃이 있다고 가정한다.
모든 장치(초소형, 소형, 중형, 대형 그리고 특대형)에서 25%/75% 분할이 발생한다.

⭐ 합계가 12개 이하인지 확인하자. 사용 가능한 열 12개를 모두 사용할 필요는 없다.

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

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

예제 2

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

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

자동 레이아웃 열

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

예제

<!-- Two columns: 50% width-->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<!-- Four columns: 25% width-->
<div class="row">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기