부트스트랩 4 그리드 초소형
초소형 그리드 예
| Extra small | Small | Medium | Large | Extra Large | |
|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Screen width | <576px | >=576px | >=768px | >=992px | >=1200px |
두 개의 열이 있는 간단한 레이아웃이 있다고 가정합니다. 열이 모든 장치 에 대해 25%/75%로 분할되기를 원합니다 .
두 열에 다음 클래스를 추가합니다.
<div class="col-3">....</div>
<div class="col-9">....</div>
다음 예에서는 모든 장치(초소형, 소형, 중형, 대형 및 초대형)에서 25%/75% 분할이 발생합니다.
3열
열-9
예시
<div class="container-fluid">
<div class="row">
<div class="col-3 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-9 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
참고: 합계가 최대 12개 이하인지 확인합니다(사용 가능한 열 12개를 모두 사용할 필요는 없음).
33.3%/66.6% 분할의 경우 .col-4및 .col-8(및 50%/50% 분할의 경우 .col-6및 .col-6)를 사용합니다.
4열
열-8
6열
6열
예시
<!-- 33.3%/66.6% split -->
<div class="container-fluid">
<div class="row">
<div class="col-4 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-8 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
<!-- 50%/50% split -->
<div class="container-fluid">
<div class="row">
<div class="col-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-6 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
자동 레이아웃 열
Bootstrap 4에는 모든 장치에 대해 동일한 너비의 열을 만드는 쉬운 방법
이.col-* 있습니다 . 부트스트랩은 열의 수를 인식하고 각 열의 너비는 동일합니다..col
<!-- Two columns: 50% width-->
<div class="row">
<div class="col">1 of
2</div>
<div class="col">2 of 2</div>
</div>
<!-- Four
columns: 25% width-->
<div class="row">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
1/2
2/2
4 중 1
2/4
3/4
4/4
다음 장에서는 소형 장치에 대해 다른 분할 비율을 추가하는 방법을 보여줍니다.