View on GitHub

Gutters

Gutters 是在欄 (columns) 之間的 padding, 用來響應式的間隔和對齊 Bootstrap 網格系統中的內容。

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

On this page

如何運作

Gutters 是介於欄位之間的間隙，經水平方向的 padding 產生。 我們在每一欄設置 padding-right 與 padding-left ，並使用負值的 margin 來抵銷每行的開頭與結尾以對齊網格內容。
Gutters 的寬度為 1.5rem (24px)。 這使我們能將網格與 padding and margin spacers 的比例匹配.
Gutters 可以進行響應式的調整。 使用特定斷點的 gutter 類別來修改水平 gutter、垂直 gutter、以及所有的 gutter。

水平 gutters

.gx-* 類別可以用來控制水平 gutter 的寬度。若使用較大的 gutters 且要避免不必要的溢出，則需在 .container 或 .container-fluid 的父層使用匹配的 padding。例如，在下方範例中我們增加了 .px-4 的 padding:

Custom column padding

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

另一種解決方案是使用 .overflow-hidden 包圍 .row :

Custom column padding

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

垂直 gutters

.gy-* 類別可以控制垂直 gutter 的寬度。與水平 gutters 相同，垂直 gutters 會導致 .row 下方溢出頁尾。如果發生這種情況，請使用 .overflow-hidden 包圍 .row 的外層:

Custom column padding

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

水平及垂直 gutters

.g-* 類別可以控制水平 gutter 的寬度，下方的範例我們使用了較小的 gutter width，因此我們不需再另外使用 .overflow-hidden 包住其父層。

Custom column padding

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

行列式 gutters

Gutter 也可以添加至行列。在下方的範例中，我們使用響應式行列與響應式 gutter。

Row column

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

No gutters

可以使用 .g-0 刪除預定義網格類別中欄位間的 gutters。這將會移除 .row 的負值 margin 以及所有直屬子列的水平 padding 。

需要貼齊邊緣的設計嗎？ 刪除父層的 .container 或 .container-fluid。

實際上，這就是他的外觀。請注意，你可以繼續將其與其他預定義的網格類別（包括 column widths, responsive tiers, reorders, 與其他）一起使用。

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

.col-6 .col-md-4

<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 map 中 $spacers 下的 $gutters 建構的。

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