如何消除 Bootstrap 列之间的装订线间距？

如何删除 Bootstrap 中列之间的装订线间距

Bootstrap 中列之间的间距在不希望的情况下可能会造成视觉上混乱的外观。以下是如何在不设置单独边距的情况下消除此装订线空间的方法：

Bootstrap 5 及更高版本

在 Bootstrap 5 中，.no-gutters 类已替换为 .g -0。您可以在 .row 元素上使用它来删除列之间的所有间距：

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

Bootstrap 5 还提供响应式装订线类，允许您调整特定断点的间距。例如，.gx-sm-4 只会在具有“小”断点的屏幕（例如智能手机）上删除水平装订线。

Bootstrap 4

中Bootstrap 4中，可以直接使用.no-gutters类.row:

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

Bootstrap 3.4.0

在 Bootstrap 3.4 中，引入了专用的 .row-no-gutters 类：

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

引导程序 3 (

在 Bootstrap 3.3.9 及更早版本中，装订线是使用填充创建的。要删除它们，您需要使用以下 CSS：

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

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

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

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