如何删除 Bootstrap 中的装订线？

删除 Bootstrap 中的装订线：综合指南

简介

使用 Bootstrap 时，列之间 30 像素的间距有时会成为您设计的障碍。在本文中，我们将探索各种方法来删除此装订线，而无需设置负边距。

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 5 提供了一系列新的装订线类，用于响应式微调列之间的间距。

Bootstrap 4

对于 Bootstrap 4，.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 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>

引导程序 3 ,

对于 3.4.0 之前的 Bootstrap 3 版本，装订线是使用填充创建的。要删除它们，您可以定义自定义 CSS 类：

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

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

然后，将 .no-gutter 类添加到 .row 元素。

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