Bootstrap 4 특대형 그리드

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

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

특대형 그리드

예제

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

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

특대형만 사용

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

예제

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

자동 레이아웃 열

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

화면 크기가 1200px 미만이면 기둥이 수평으로 쌓이게 된다.

예제

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

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

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기