如何在沒有負邊距的情況下刪除 Bootstrap 列裝訂線？

在不使用負邊距的情況下消除Bootstrap 中的列裝訂線

問題：

問題：

如何刪除列之間預設的30px 間距在Bootstrap中，無需設定負數

解：

根據您的Bootstrap 版本，建議的方法如下：

• Bootstrap 5：
• 新方法：利用 .g-0 類別消除 .row 內的裝訂線。

行裝訂線：透過應用為特定斷點設計的裝訂線類（例如.gx -sm-4 適用於小型水平排水溝

• Bootstrap 4：
• 簡化：直接在 .row 上實現 .no-gutters類別.

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

程式碼範例

:

• Bootstrap 3.4.0 :

基於類別的：使用新的引入了.row-no-gutters

• Bootstrap 33 ,
• 填充調整：修改內邊距列並向其中添加自訂.no-gutter 類別.row.

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

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

CSS 代碼:

以上是如何在沒有負邊距的情況下刪除 Bootstrap 列裝訂線？的詳細內容。更多資訊請關注PHP中文網其他相關文章！