如何去除不同版本的 Bootstrap 中的裝訂線？

在Bootstrap 中刪除裝訂線

在Bootstrap 中，列由30px 裝訂線分隔，但在某些情況下需要刪除它。本文深入探討了在不訴諸 margin-left:-30px 方法的情況下刪除裝訂線的解決方案。

Bootstrap 5（最新）

Bootstrap 5 引入了一個簡化的解決方案與 .no-gutters 類。將此類加入.row 將消除列之間的間距：

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

Bootstrap 4

Bootstrap 4 也加入了.no-gutters 類，類似Bootstrap 5:

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

Bootstrap 4 還包括響應式裝訂線類，提供更大的靈活性：

<!-- Remove gutters on small and above breakpoints -->
<div class="row g-0 g-sm-3">
  <div class="col">x</div>
  <div class="col">x</div>
  <div class="col">x</div>
</div>

Bootstrap 3.4.0

Bootstrap 3.4.0

x

x

x

對於Bootstrap版本3.4.0及更高版本，專用

.row-no-gutters 類別可以使用：

Bootstrap 3 (/* .row */ .no-gutter { margin-right: 0; margin-left: 0; } /* .row > [class*="col-"] */ .no-gutter > [class*="col-"] { padding-right: 0; padding-left: 0; }

在早期Bootstrap 版本（3 到3.3.9），刪除裝訂線需要同時調整邊距和padding:將

.no-gutter

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

類別加入

.row

即可： 利用這些技術，您可以輕鬆消除Bootstrap中的裝訂線並實現所需的視覺佈局。

以上是如何去除不同版本的 Bootstrap 中的裝訂線？的詳細內容。更多資訊請關注PHP中文網其他相關文章！