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

두 열을 포함한 간단한 레이아웃이 있다고 가정해 봅시다. 우리는 열이모든장치 분할 25% / 75%.

아래와 같은 클래스를 두 열에 추가합니다:

<div class="col-3">....</div>
<div class="col-9">....</div>

다음 예시는 모든 장치( 초소형, 소형, 중형, 대형, 초대형 및特大형)의 25% / 75% 분할을 유발합니다.

예제

<div class="container-fluid">
  <div class="row">
    <div class="col-3 bg-primary">
      <p>1961년 4월 29일에 설립된 세계 자연 보호 기금(WWF)은 대熊猫을 상징하는 로고를 가지고 있습니다 ...</p>
    </div>
    <div class="col-9 bg-dark">
      <p>1980년, WWF이 중국에 공식적으로 도착하여 중국 정부의 초대로 중국에 도착하여 대熊猫 및 그의 서식지를 보호하는 작업을 시작했습니다 ...</p>
    </div>
  </div>
</div>

자신이 직접 시도해 보세요

주의:총 합이 12(모든 12개의 사용 가능한 열을 사용하지 않아도 됨) 이하 또는 같다면 확실하게 해 주세요:

33.3% / 66.6%의 분할에 대해서는 다음과 같이 사용해야 합니다 .col-4 과 .col-8(50% / 50%의 분할에 대해서는 다음과 같이 사용해야 합니다 .col-6 과 .col-6）：

예제

<!-- 33.3%/66.6% 분할 -->
<div class="container-fluid">
  <div class="row">
    <div class="col-4 bg-primary">
      <p>1961년 4월 29일에 설립된 세계 자연 보호 기금(WWF)은 대熊猫을 상징하는 로고를 가지고 있습니다 ...</p>
    </div>
    <div class="col-8 bg-dark">
      <p>1980년, WWF이 중국에 공식적으로 도착하여 중국 정부의 초대로 중국에 도착하여 대熊猫 및 그의 서식지를 보호하는 작업을 시작했습니다 ...</p>
    </div>
  </div>
</div>
<!-- 50%/50% 분할 -->
<div class="container-fluid">
  <div class="row">
    <div class="col-6 bg-primary">
      <p>1961년 4월 29일에 설립된 세계 자연 보호 기금(WWF)은 대熊猫을 상징하는 로고를 가지고 있습니다 ...</p>
    </div>
    <div class="col-6 bg-dark">
      <p>1980년, WWF이 중국에 공식적으로 도착하여 중국 정부의 초대로 중국에 도착하여 대熊猫 및 그의 서식지를 보호하는 작업을 시작했습니다 ...</p>
    </div>
  </div>
</div>

자신이 직접 시도해 보세요

자동 레이아웃 열

Bootstrap 5에서는 모든 장치에 대해 자동 레이아웃 열을 생성하는 간단한 방법이 있습니다평행한 열제거하고만 하면 됩니다 .col-* 숫자를 제거하고 col 요소에만 사용 .col 클래스. Bootstrap은 열의 수를 인식하고, 각 열은 동일한 너비를 가집니다:

<!-- 두 개 열: 50% 너비 -->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>
<!-- 네 개 열: 25% 너비 -->
<div class="row">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

자신이 직접 시도해 보세요

다음 장에서는 소형 장치에 다른 분할 비율을 추가하는 방법을 보여줍니다.