[grid] BS5 - Grid Small (BS그리드 소형기기) - .col-sm-숫자, .col-sm 클래스

1. 소형 기기 화면 너비
2. 수동 너비
3. 자동 너비

※ BS4와 동일

※ 각 클래스는 해당 화면너비 이상에 확대 적용됨.

소형 기기 화면 너비

• .col, .col-○ (extra small device : 화면너비 < 576px)
• .col-sm, .col-sm-○ (smll device : 화면너비 >= 576px)
• .col-md, .col-md-○ (medium device : 화면너비 >= 768px)
• .col-lg, .col-lg-○ (large device : 화면너비 >= 992px)
• .col-xl, .col-xl-○ (xlarge device : 화면너비 >= 1200px)
• .col-xxl, .col-xxl-○ (xxlarge device : 화면너비 >= 1400px)

 

수동 너비

(sm 미만 수직) → (sm 이상 3:9)

 

<div class="container-fluid">

  <div class="row">

    <div class="col-sm-3 bg-success">...</div>

    <div class="col-sm-9 bg-warning">...</div>

  </div>

</div>

 

결과보기

---

(sm 미만 수직) → (sm 이상 4:8)

 

<div class="container-fluid">

  <div class="row">

    <div class="col-sm-4 bg-success">...</div>

    <div class="col-sm-8 bg-warning">...</div>

  </div>

</div>

 

결과보기

---

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

 

<div class="container-fluid">

  <div class="row">

    <div class="col-sm-6 bg-success">...</div>

    <div class="col-sm-6 bg-warning">...</div>

  </div>

</div>

 

결과보기

자동 너비

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

 

<div class="row">

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

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

</div>

 

결과보기

---

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

 

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

 

결과보기