Bootstrap 5 그리드: 초대형 장치

超大 장치 그리드 예제

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% 분할, 중형 장치에서는 50%/50% 분할, 대형 장치에서는 33%/66% 분할을 사용했습니다：

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

하지만 xlarge 장치에서는 20% / 80% 분할 디자인이 더 나을 수 있습니다。

超大 장치는 화면 너비가 1200 픽셀 이상。

xlarge 장치에서는 다음을 사용하겠습니다: .col-xl-* 구분자:

<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>

아래 예제는 소형 장치에서 25%/75%, 중형 장치에서 50%/50%, 대형 장치에서 33%/66% 및 xlarge와 xxlarge에서 20%/80% 장치를 분할하는 것을 초래합니다. 매우 작은 장치에서는 자동으로 쌓입니다(100%)：

예제

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>세계 자연 보호 기금(WWF)은 1961년 4월 29일에 설립되었으며, 그 상징은 대熊猫입니다 ...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>1980년, WWF이 중국에 공식적으로 도착하여 중국 정부의 초대로 대熊猫 및 그 자연 환경 보호 작업을 시작했습니다 ...</p>
    </div>
  </div>
</div>

직접 시험해 보세요

주의:}총 합이 항상 12로 유지되도록 하세요

XLarge만 사용합니다

아래의 예제에서는 .col-xl-6 클래스(없음 .col-lg-*、.col-md-* 및/또는 .col-sm-*）。이는 xlarge 및 xxlarge 장치가 50%/50%로 분할된다는 것을 의미합니다. 그러나, 대형, 중형, 소형 및 초소형 장치는 수직으로 쌓입니다(100% 넓이):

예제

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-6">
      <p>세계 자연 보호 기금(WWF)은 1961년 4월 29일에 설립되었으며, 그 상징은 대熊猫입니다 ...</p>
    </div>
    <div class="col-xl-6">
      <p>1980년, WWF이 중국에 공식적으로 도착하여 중국 정부의 초대로 대熊猫 및 그 자연 환경 보호 작업을 시작했습니다 ...</p>
    </div>
  </div>
</div>

직접 시험해 보세요

자동 레이아웃 열

Bootstrap 5에서 모든 장치에 동일한 넓이의 열을 생성하는 간단한 방법이 있습니다: 단지 .col-xl-* 숫자를 제거하고 col 요소에만 사용하세요 .col-xl 클래스를 사용하여 인식하고, 각 열은 동일한 넓이를 가집니다.

화면 크기가1200px 미만열은 수평으로 쌓입니다:

<!-- 두 열: 초대형 이상 장치에서는 50% 넓이 -->
<div class="row">
  <div class="col-xl">1 of 2</div>
  <div class="col-xl">2 of 2</div>
</div>
<!-- 네 열: 초대형 이상 장치에서는 25% 넓이 -->
<div class="row">
  <div class="col-xl">1 of 4</div>
  <div class="col-xl">2 of 4</div>
  <div class="col-xl">3 of 4</div>
  <div class="col-xl">4 of 4</div>
</div>

직접 시험해 보세요