如何消除 Bootstrap 列之間的裝訂線間距？

如何刪除Bootstrap 中列之間的裝訂線間距

Bootstrap 中列之間的間距在不希望的情況下可能會造成視覺上混亂的外觀。以下是如何在不設定單獨邊距的情況下消除此裝訂線空間的方法：

Bootstrap 5 及更高版本

在Bootstrap 5 中，. no-gutters 類別已替換為.g -0。您可以在 .row 元素上使用它來刪除列之間的所有間距：

<div class="row g-0">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

Bootstrap 5 還提供響應式裝訂線類，讓您可以調整特定斷點的間距。例如，.gx-sm-4 只會在具有「小」斷點的螢幕（例如智慧型手機）上刪除水平裝訂線。

Bootstrap 4

中Bootstrap 4中，可以直接使用.no-gutters類.row:

<div class="row no-gutters">
  <div class="col" ...></div>
  <div class="col" ...></div>
  <div class="col" ...></div>
</div>

Bootp 33. .0

<div class="row row-no-gutters">
  <div class="col" ...></div>
  <div class="col" ...></div>
  <div class="col" ...></div>
</div>

在Bootstrap 3.4 中，引入了專用的.row-no-gutters 類別：

引導程式3 (.no-gutter { margin-right: 0; margin-left: 0; } .no-gutter > [class*="col-"] { padding-right: 0; padding-left: 0; }

在Bootstrap 3.3Bootstrap 3.3 .9 及更早版本中，裝訂線是使用填滿建立的。要刪除它們，您需要使用以下 CSS：將 .no-gutter 類別新增至 .row 元素。

以上是如何消除 Bootstrap 列之間的裝訂線間距？的詳細內容。更多資訊請關注PHP中文網其他相關文章！