목차
초대형 기기 화면 너비
수동 너비
자동 너비
※ 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) → (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>
결과보기
주소 복사
랜덤 이동