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