[grid] BS4 - Grid Extra Large (BS그리드 초대형기기) - .col-xl-숫자, .col-xl 클래스

목차

1. 수동 너비
2. 자동 너비

 

※ .col-숫자, .col 클래스 경우, 모든 너비에 적용.

※ .col-sm-숫자, .col-sm 클래스 경우, 576px 이상에 적용.

※ .col-md-숫자, .col-md 클래스 경우, 768px 이상에 적용.

※ .col-lg-숫자, .col-lg 클래스 경우, 992px 이상에 적용.

★ .col-xl-숫자, .col-xl 클래스 경우, 1200px 이상에 적용.

 

수동 너비

(sm 미만 수직) → (sm 이상 3:9) → (md 이상 6:6) → (lg 이상 4:8) → (xl 이상 2:10)

 

<div class="container-fluid">

  <div class="row">

    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 bg-success">...</div>

    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 bg-warning">...</div>

  </div>

</div>

 

결과보기

---

(xl 미만 수직) → (xl 이상 6:6)

 

<div class="row">

  <div class="col-xl-6">...</div>

  <div class="col-xl-6">...</div>

</div>

 

결과보기

PS. 합계가 항상 12인지 확인 !!

 

자동 너비

(xl 미만 수직) → (xl 이상 각 컬럼 너비 12/2 = 6 차지)

 

<div class="row">

  <div class="col-xl">1 of 2</div>

  <div class="col-xl">2 of 2</div>

</div>

 

결과보기

---

(xl 미만 수직) → (xl 이상 각 컬럼 너비 12/4 = 3 차지)

 

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

 

결과보기