부트스트랩 4 그리드 - 초대형
XLarge 그리드 예
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 |
이전 장에서 우리는 중소형 장치에 대한 클래스가 있는 그리드 예제를 제시했습니다. 우리는 두 개의 div(열)를 사용했으며 소형 장치에서는 25%/75% 분할을, 중간 장치에서는 50%/50% 분할을, 대형 장치에서는 33%/66% 분할을 제공했습니다.
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
그러나 초대형 장치에서는 디자인이 20%/80% 분할로 더 나을 수 있습니다.
초대형 기기는 화면 너비가 1200픽셀 이상인 것으로 정의됩니다 .
xlarge 장치의 경우 다음 .col-xl-*
클래스를 사용합니다.
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>
다음 예는 소형 장치에서 25%/75% 분할, 중형 장치에서 50%/50% 분할, 대형 장치에서 33%/66% 분할 및 초대형 장치에서 20%/80% 분할을 초래합니다. 초소형 장치에서는 자동으로 스택(100%)됩니다.
col-sm-3 col-md-6 col-lg-4 col-xl-2
col-sm-9 col-md-6 col-lg-8 col-xl-10
예시
<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>
참고: 합계가 항상 최대 12인지 확인하십시오.
XLarge만 사용
아래 예에서는 .col-xl-6
클래스만 지정합니다( 및/또는 제외 .col-lg-*
) . 이는 xlarge 장치가 50%/50%로 분할됨을 의미합니다. 그러나 대형, 중형, 소형 및 초소형 장치의 경우 수직으로 쌓입니다(100% 너비)..col-md-*
.col-sm-*
예시
<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>
자동 레이아웃 열
부트스트랩 4에는 모든 장치에 대해 동일한 너비의 열을 만드는 쉬운 방법
이.col-xl-*
있습니다 . 부트스트랩은 열의 수를 인식하고 각 열의 너비는 동일합니다..col-xl
화면 크기가 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>
1/2
2/2
1/4
2/4
3/4
4/4