Bootstrap 4 수평형 그리드

초소형 장치에 적층되어 시작하여 더 큰 장치에서 수평이 되는 기본 그리드 시스템을 만들 것이다.

수평으로 쌓기

간단한 “수평으로 쌓인” 2열 레이아웃을 보여준다.
즉, 자동으로 쌓이는(100%) 매우 작은 화면을 제외하고 모든 화면에서 50%/50% 분할이 발생함을 의미한다.

예제

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

플루이드 컨테이너

예제

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

자동 레이아웃 열

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

예제

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

모든 포스트 보기