Bootstrap 5 그리드: XXL
- 이전 페이지 BS5 그리드 XLarge
- 다음 페이지 BS5 그리드 예제
XXL 장치 그리드 예제
| XSmall | Small | Medium | Large | Extra Large | XXL | |
|---|---|---|---|---|---|---|
| 클래스 접두어 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| 화면 너비 | <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px |
XXL 장치는 다음과 같이 정의됩니다 1400 픽셀 이상의 화면 너비.
중형, 대형, 초대형 장치에서 50%/50% 분할이 생성되며, XXL 장치에서 25%/75% 분할이 생성됩니다. 소형 및 초소형 장치에서는 자동으로 쌓입니다(100%):
예제
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xxl-3">
<p>1961년 4월 29일에 설립된 세계 자연 보호 기금(WWF)은 대熊猫를 상징하는 브랜드로 유명합니다 ...</p>
</div>
<div class="col-md-6 col-xxl-9">
<p>1980년, WWF이 중국에 공식적으로 도착하여 중국 정부의 초대로 대熊猫 및 그 서식지 보호 작업을 시작했습니다 ...</p>
</div>
</div>
</div>
주의사항:총 합이 항상 12로 유지되도록 주의해야 합니다.
오직 XXL만 사용
다음 예제에서는 .col-xxl-6 클래스(아래에 .col-md-* 또는 .col-sm-*）。이는 xxlarge 장치가 50%/50%로 분할된다는 것을 의미합니다. 하지만, Extra Large, Large, Medium, Small 및 Extra Small 장치에서는 수직으로 쌓입니다(100% 너비):
예제
<div class="container-fluid">
<div class="row">
<div class="col-xxl-6">
<p>1961년 4월 29일에 설립된 세계 자연 보호 기금(WWF)은 대熊猫를 상징하는 브랜드로 유명합니다 ...</p>
</div>
<div class="col-xxl-6">
<p>1980년, WWF이 중국에 공식적으로 도착하여 중국 정부의 초대로 대熊猫 및 그 서식지 보호 작업을 시작했습니다 ...</p>
</div>
</div>
</div>
자동 레이아웃 열
Bootstrap 5에서 모든 장치에 동일한 너비의 열을 생성하는 간단한 방법이 있습니다: 단지 .col-xxl-* 숫자를 제거하고 col 요소에만 사용합니다 .col-xxl 클래스를 인식하고, 각 열은 동일한 너비를 가집니다.
화면 크기가1400px 미만열은 수평으로 쌓입니다:
<!-- 두 개 열: 특대형 이상 장치에서는 50% 너비 --> <div class="row"> <div class="col-xxl">1 of 2</div> <div class="col-xxl">2 of 2</div> </div> <!-- 네 개 열: 특대형 이상 장치에서는 25% 너비 --> <div class="row"> <div class="col-xxl">1 of 4</div> <div class="col-xxl">2 of 4</div> <div class="col-xxl">3 of 4</div> <div class="col-xxl">4 of 4</div> </div>
- 이전 페이지 BS5 그리드 XLarge
- 다음 페이지 BS5 그리드 예제
