거터

거터는 열 사이의 여백으로, 부트스트랩 그리드 시스템에서 반응적으로 공간을 지정하고 콘텐츠를 정렬하는 데 사용됩니다.

이 페이지에서

작동 방식

거터는 가로로 생성된 열 콘텐츠 사이의 간격 padding입니다. padding-right각 열에 및 를 설정 하고 padding-left음수 margin를 사용하여 콘텐츠를 정렬하기 위해 각 행의 시작과 끝에서 오프셋을 사용합니다.
거터는 1.5rem( 24px) 너비에서 시작합니다. 이를 통해 그리드를 패딩 및 여백 스페이서 스케일에 맞출 수 있습니다.
거터는 반응적으로 조정할 수 있습니다. 중단점별 거터 클래스를 사용하여 수평 거터, 수직 거터 및 모든 거터를 수정합니다.

수평 거터

.gx-*클래스를 사용하여 수평 거터 너비를 제어할 수 있습니다. 일치하는 패딩 유틸리티를 사용하여 원치 않는 오버플로를 방지하기 위해 더 큰 거터를 사용하는 경우 .container또는 .container-fluid부모를 조정해야 할 수도 있습니다. 예를 들어, 다음 예에서는 패딩을 다음과 같이 늘렸습니다 .px-4.

사용자 정의 열 패딩

HTML

<div class="container px-4 text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

.row다른 솔루션 은 .overflow-hidden클래스 주위에 래퍼를 추가하는 것 입니다.

사용자 정의 열 패딩

HTML

<div class="container overflow-hidden text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

수직 거터

.gy-*열이 새 줄로 줄 바꿈될 때 행 내의 세로 여백 너비를 제어하는 데 클래스를 사용할 수 있습니다. 수평 거터와 마찬가지로 수직 거터는 .row페이지 끝 부분 아래에 약간의 오버플로가 발생할 수 있습니다. 이 경우 클래스 .row와 함께 래퍼를 추가합니다 ..overflow-hidden

사용자 정의 열 패딩

HTML

<div class="container overflow-hidden text-center">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

수평 및 수직 거터

.g-*.overflow-hidden클래스를 사용하여 수평 거터 너비를 제어할 수 있습니다. 다음 예에서는 더 작은 거터 너비를 사용하므로 래퍼 클래스 를 추가할 필요가 없습니다 .

사용자 정의 열 패딩

HTML

<div class="container text-center">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

행 열 거터

행 열에 거터 클래스를 추가할 수도 있습니다 . 다음 예에서는 반응형 행 열과 반응형 거터 클래스를 사용합니다.

행 열

HTML

<div class="container text-center">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
  </div>
</div>

거터 없음

사전 정의된 그리드 클래스에서 열 사이의 거터는 를 사용하여 제거할 수 있습니다 .g-0. 이것은 모든 직계 자식 열에서 margin음수 및 .row가로 를 제거합니다.padding

엣지 투 엣지 디자인이 필요하십니까? 오버플로를 방지 하려면 부모를 삭제 .container하고 .container-fluid에 추가하십시오 .mx-0..row

실제로는 다음과 같습니다. 미리 정의된 다른 모든 그리드 클래스(열 너비, 반응 계층, 재정렬 등 포함)와 함께 계속 사용할 수 있습니다.

.col-sm-6 .col-md-8

.col-6 .col-md-4

HTML

<div class="row g-0 text-center">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

거터 변경

클래스는 $guttersSass 맵에서 상속된 Sass 맵 에서 빌드 $spacers됩니다.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);