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 |
이전 장에서는 소형 장치를 위한 클래스를 포함한 그리드 예제를 보여주었습니다. 두 개의 div(열)을 사용하고, 그들을 25% / 75%로 분할했습니다:
<div class="col-sm-3">....</div> <div class="col-sm-9">....</div>
하지만 중형 장치에서는 50% / 50% 분할 디자인이 더 좋을 수 있습니다.
중형 장치는 스크린 너비768 픽셀에서 991 픽셀까지.
중형 장치에서는 다음을 사용하겠습니다 .col-md-* 클래스:
<div class="col-sm-3 col-md-6">....</div> <div class="col-sm-9 col-md-6">....</div>
소형 장치에서는 포함 -sm- 의 클래스. 중형 장치에서는 포함 -md- 의 클래스.
다음은 소형 장치에서 25% / 75% 분할과 중형(대형, 초대형, 초超大형 장치) 장치에서 50% / 50% 분할을 유발합니다. 초소형 장치에서는 자동으로 쌓입니다(100%):
예제
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6">
<p>1961년 4월 29일에 설립된 세계 자연 보호 기금(WWF)은 대熊猫을 상징하는 랜드마크입니다 ...</p>
</div>
<div class="col-sm-9 col-md-6">
<p>1980년, WWF이 중국에 공식적으로 도착하여 중국 정부의 초대로 중국으로 오기 위해 대熊猫 및 그 자생지 보호 작업을 시작했습니다 ...</p>
</div>
</div>
</div>
주의:총 합이 12에 해당하거나 더 작아야 합니다(모든 12개의 사용 가능한 열을 사용하지 않아도 됩니다):
중형만 사용합니다
다음 예제에서는 .col-md-6 클래스( .col-sm-*）。이는 중형, 대형, 초대형 및 XXL 장치가 50% / 50%로 분할된다는 것을 의미합니다. 그러나 소형 및 초소형 장치는 직립으로 쌓입니다(100% 너비):
예제
<div class="row">
<div class="col-md-6">
<p>1961년 4월 29일에 설립된 세계 자연 보호 기금(WWF)은 대熊猫을 상징하는 랜드마크입니다 ...</p>
</div>
<div class="col-md-6">
<p>1980년, WWF이 중국에 공식적으로 도착하여 중국 정부의 초대로 중국으로 오기 위해 대熊猫 및 그 자생지 보호 작업을 시작했습니다 ...</p>
</div>
</div>
자동 레이아웃 열
Bootstrap 5에서 모든 장치에 동일한 너비의 열을 생성하는 간단한 방법이 있습니다: 단지 .col-md-* 숫자를 제거하고 col 요소에만 사용하세요 .col-md 클래스를 인식하고, 각 열은 동일한 너비를 가집니다.
화면 크기가768px 미만열은 수평으로 쌓입니다:
<!-- 두 열: 중형 이상 장치에서는 50% 너비 --> <div class="row"> <div class="col-md">1 of 2</div> <div class="col-md">2 of 2</div> </div> <!-- 네 열: 중형 이상 장치에서는 25% 너비 --> <div class="row"> <div class="col-md">1 of 4</div> <div class="col-md">2 of 4</div> <div class="col-md">3 of 4</div> <div class="col-md">4 of 4</div> </div>
다음 장에서는 대형 장치에 다른 분할 비율을 추가하는 방법을 보여줍니다.
- 이전 페이지 BS5 그리드 소미
- 다음 페이지 BS5 그리드 라지
