間距

間距是欄之間的內距，用於在 Bootstrap 格線系統中根據回應調整內容間距和對齊。

在此頁面中

運作方式

間距是欄內容之間的間隙，由水平 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">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

另一種解決方案是使用 .overflow-hidden 類別在 .row 周圍新增一個包裝器

自訂欄位內距

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>

垂直間距

當欄位換行時，.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">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>

水平和垂直間距

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

自訂欄位內距

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>

列欄位間距

間距類別也可以新增到列欄位。在以下範例中，我們使用回應式列欄位和回應式間距類別。

列欄位

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>

無間距

使用 .g-0 可以移除預設網格類別中欄位之間的間距。這會移除 .row 的負 margin，以及所有直接子欄位的水平 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>

變更間距

類別是由 $gutters Sass 地圖建置而成的，它繼承自 $spacers Sass 地圖。

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