Bootstrap 5 그리드: 쌓기에서 수평으로
- 이전 페이지 BS5 그리드 시스템
- 다음 페이지 BS5 그리드 XSmall
그리드 예제: 수평으로 쌓기
우리는 초소형 장치에서 쌓이고 큰 장치에서 수평으로 변하는 기본 그리드 시스템을 만들어 보겠습니다.
아래 예제는 간단한 '수평으로 쌓기' 두 열 레이아웃을 보여줍니다. 이는 모든 화면에서 50%/50%의 분할을 생성하며, 초소형 화면에서는 자동으로 쌓입니다 (100%):
예제: 수평으로 쌓기
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 bg-primary">
<p>열 1 ...</p>
</div>
<div class="col-sm-6 bg-dark">
<p>열 2 ...</p>
</div>
</div>
</div>
ヒント:.col-sm-* 클래스 안의 숫자는 div가 몇 열을 건너뜁게 되는지를 나타냅니다(총 12열입니다). 따라서,.col-sm-1 1열을 건너뜁니다..col-sm-4 4열을 건너뜁니다..col-sm-6 6열을 건너뜁니다.
주의:총 합이 12 또는 그 이하가 되도록 하십시오(모든 12개의 사용 가능한 열을 사용하지 않아도 됩니다):
ヒント:으로 변경하세요 .container-fluid 클래스를 .container، 어떤 요소든 full-width 레이아웃을 전환하여 fixed-width 의 응답형 레이아웃:
응답형 컨테이너 예제
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>열 1 ...</p>
</div>
<div class="col-sm-6">
<p>열 2 ...</p>
</div>
</div>
</div>
자동 레이아웃 열
Bootstrap 5에서 모든 장치에 동일한 너비의 열을 생성하는 간단한 방법이 있습니다: 단지 .col-size-* 숫자를 제거하고 col 요소에만 사용하세요 .col-size 클래스. Bootstrap은 몇 개의 열이 있는지 인식하고, 각 열은 동일한 너비를 가집니다. size 클래스(sm, md 등)은 열이 언제 반응해야 하는지 결정합니다:
<!-- 모든 화면에서 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 그리드 XSmall
