如何刪除 Bootstrap 網格系統中的裝訂線空間？

刪除特定Div 的裝訂線空間

簡介

Bootstrap 網格系統在列之間採用30px裝訂線，有助於整潔和一致的佈局。然而，可能需要刪除行內特定元素的裝訂線空間。本文探討了在不影響 Bootstrap 反應能力或引入難看的空白空間的情況下實現此目標的技術。

Bootstrap 3.x

對於 Bootstrap 3.x，解決方案已變成更簡單。現在使用填充物來創建排水溝，使其更容易移除。實作以下 CSS：

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}

要刪除特定 div 的裝訂線，只需將「無裝訂線」類別指派給對應的行即可。

Bootstrap 4.x

Bootstrap 4.x 包含一個內建實用程式類別“no-gutters”，它

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

Bootstrap 5.x

Bootstrap 的最新版本透過引入裝訂線類，對裝訂線間距提供了更精細的控制。使用“g-0”完全刪除裝訂線或使用“g-1-5”類別調整它們。這些類別還可以透過斷點進行響應式應用，例如「gx-sm-4」可以調整小於 768px 的螢幕的水平裝訂線。

以上是如何刪除 Bootstrap 網格系統中的裝訂線空間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！