如何刪除或調整 Bootstrap 中特定 Div 的裝訂線空間？

刪除特定Div 的裝訂線空間

Bootstrap 的預設網格系統在列之間包含30 像素的裝訂線空間，如果完全刪除裝訂線，則會導致一行有360 像素的未使用空間。要解決此問題，在保持Bootstrap 響應能力的同時，請按照以下步驟操作：

Bootstrap 5（自2021 年更新起）

Bootstrap 5 引入了特定的裝訂線類：

• g-0：否裝訂線
• g-(1-5)：使用間距單位調整水平和垂直裝訂線
• gy -*：調整垂直裝訂線
• gx-*：調整水平gutters

範例：

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

Bootstrapp. CSS）

Bootstrap 4 提供了no-gutters類別行：

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

引導程式3（原始答案）

Bootstrap 3 引入了使用填充而不是間距的邊距。要達到此效果：

1. 建立一個新的CSS 類別：

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

2. 從第一列和最後一列之外的所有欄位中刪除填充：

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

3. 將no-gutter類別應用在所需的行：

<div class="row no-gutter">
    <div class="col-lg-1">...</div>
    <div class="col-lg-1">...</div>
    <div class="col-lg-1">...</div>
</div>

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