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