거터
거터는 열 사이의 여백으로, 부트스트랩 그리드 시스템에서 반응적으로 공간을 지정하고 콘텐츠를 정렬하는 데 사용됩니다.
작동 방식
-
거터는 가로로 생성된 열 콘텐츠 사이의 간격
padding
입니다.padding-right
각 열에 및 를 설정 하고padding-left
음수margin
를 사용하여 콘텐츠를 정렬하기 위해 각 행의 시작과 끝에서 오프셋을 사용합니다. -
거터는
1.5rem
(24px
) 너비에서 시작합니다. 이를 통해 그리드를 패딩 및 여백 스페이서 스케일에 맞출 수 있습니다. -
거터는 반응적으로 조정할 수 있습니다. 중단점별 거터 클래스를 사용하여 수평 거터, 수직 거터 및 모든 거터를 수정합니다.
수평 거터
.gx-*
클래스를 사용하여 수평 거터 너비를 제어할 수 있습니다. 일치하는 패딩 유틸리티를 사용하여 원치 않는 오버플로를 방지하기 위해 더 큰 거터를 사용하는 경우 .container
또는 .container-fluid
부모를 조정해야 할 수도 있습니다. 예를 들어, 다음 예에서는 패딩을 다음과 같이 늘렸습니다 .px-4
.
<div class="container px-4">
<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
클래스 주위에 래퍼를 추가하는 것 입니다.
<div class="container overflow-hidden">
<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
<div class="container overflow-hidden">
<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
클래스를 사용하여 수평 거터 너비를 제어할 수 있습니다. 다음 예에서는 더 작은 거터 너비를 사용하므로 래퍼 클래스 를 추가할 필요가 없습니다 .
<div class="container">
<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>
행 열 거터
행 열에 거터 클래스를 추가할 수도 있습니다 . 다음 예에서는 반응형 행 열과 반응형 거터 클래스를 사용합니다.
<div class="container">
<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
.
실제로는 다음과 같습니다. 미리 정의된 다른 모든 그리드 클래스(열 너비, 응답 계층, 재정렬 등 포함)와 함께 계속 사용할 수 있습니다.
<div class="row g-0">
<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>
거터 변경
클래스는 $gutters
Sass 맵에서 상속된 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,
);