如何去除不同版本的 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 及更高版本，专用.row-no-gutters 类可以使用：

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

Bootstrap 3 (

在早期Bootstrap 版本（3 到 3.3.9），删除装订线需要同时调整边距和padding:

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

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

将 .no-gutter 类添加到 .row 即可：

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

利用通过这些技术，您可以轻松消除 Bootstrap 中的装订线并实现所需的视觉布局。

以上是如何去除不同版本的 Bootstrap 中的装订线？的详细内容。更多信息请关注PHP中文网其他相关文章！