間隔（Gutters）

間隔是欄之間的內距，用於在 Bootstrap 格線系統中響應式地間隔和對齊內容。

本頁內容

運作原理（How they work）

間隔是欄內容之間的間隙，由水平 padding 建立。 我們在每個欄上設定 padding-right 和 padding-left，並使用負 margin 在每列的開頭和結尾抵消它以對齊內容。
間隔起始於 1.5rem（24px）寬。 這讓我們能夠將格線與內距和外距間隔比例相匹配。
間隔可以響應式調整。 使用特定中斷點的間隔類別來修改水平間隔、垂直間隔和所有間隔。

水平間隔（Horizontal gutters）

.gx-* 類別可用於控制水平間隔寬度。如果使用較大的間隔，可能需要調整 .container 或 .container-fluid 父層以避免不必要的溢出，使用匹配的內距通用類別。例如，在以下範例中，我們使用 .px-4 增加了內距：

Custom column padding

html

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

另一個解決方案是在 .row 周圍加入帶有 .overflow-hidden 類別的包裝器：

Custom column padding

html

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

垂直間隔（Vertical gutters）

當欄換到新行時，.gy-* 類別可用於控制列內的垂直間隔寬度。與水平間隔一樣，垂直間隔可能會在頁面末端的 .row 下方造成一些溢出。如果發生這種情況，請在 .row 周圍加入帶有 .overflow-hidden 類別的包裝器：

Custom column padding

html

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

水平與垂直間隔（Horizontal & vertical gutters）

使用 .g-* 類別來控制水平和垂直格線間隔。在下面的範例中，我們使用較小的間隔寬度，因此不需要 .overflow-hidden 包裝類別。

Custom column padding

html

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

列欄間隔（Row columns gutters）

間隔類別也可以加到列欄。在以下範例中，我們使用響應式列欄和響應式間隔類別。

Row column

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">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
  </div>
</div>

No Gutters

我們預先定義的格線類別中欄之間的間隔可以使用 .g-0 移除。這會從 .row 移除負 margin，並從所有直接子欄移除水平 padding。

需要邊緣到邊緣的設計？ 移除父層 .container 或 .container-fluid，並在 .row 上加入 .mx-0 以防止溢出。

在實際應用中，它看起來是這樣的。請注意，您可以繼續將此與所有其他預先定義的格線類別一起使用（包括欄寬、響應式層級、重新排序等）。

.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>

更改間隔（Change the gutters）

類別是從 $gutters Sass map 建立的，該 map 繼承自 $spacers Sass map。

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