跳到主要內容 跳到文檔導航
Check
in English

天溝

排水溝是列之間的填充,用於響應式空間和對齊 Bootstrap 網格系統中的內容。

他們是如何工作的

  • 間距是列內容之間的間隙,由水平創建padding我們在每一列上設置padding-right和,並在每行的開頭和結尾padding-left使用負數來抵消它以對齊內容。margin

  • 排水溝從1.5rem( 24px) 寬開始。這使我們能夠將網格與填充和邊距間隔比例相匹配。

  • 可以響應地調整排水溝。使用特定於斷點的裝訂線類來修改水平裝訂線、垂直裝訂線和所有裝訂線。

水平排水溝

.gx-*類可用於控制水平裝訂線寬度。如果也使用較大的排水溝以避免不必要的溢出,則可能需要調整.containeror父級,使用匹配的填充實用程序。.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>

行列排水溝

Gutter 類也可以添加到行列中。在以下示例中,我們使用響應式行列和響應式裝訂線類。

行列
行列
行列
行列
行列
行列
行列
行列
行列
行列
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. 這會從所有直接子列中刪除負數margins.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>

改變排水溝

類是從$gutters繼承自$spacersSass 映射的 Sass 映射構建的。

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