Bootstrap 4 대형 그리드

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

소형 장치가 포함된 그리드 예제에서는 두 개의 div(열)를 사용하고 25%/75% 분할, 중형 장치에서는 50%/50% 분할을 적용했다.
그러나 대형 장치에서는 33%/66% 분할로 디자인하는 것이 더 나을 수 있다.

대형 그리드

예제

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

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

대형만 사용

아래 예제에서는 .col-lg-6 클래스만 지정한다( .col-md-* 및/또는 .col-sm-*는 없음).
이는 대형 및 x대형 장치가 50%/50% 분할됨을 의미한다.
그러나 중형, 소형 및 초소형 장치의 경우 수직으로 쌓인다(100% 너비):

예제

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

자동 레이아웃 열

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

예제

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

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

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기