在 Bootstrap 4 中删除列之间的空格 - HTML

在 Bootstrap 4 中，如果您在 HTML 中输入列时，它们之间会自动添加空格。这可能会导致一些不希望的布局问题。本文将帮助您了解如何删除列之间的空格。

方法

方法1: 配置样式表

在样式表中添加以下代码，即可删除列之间的空格（这里以 class 为 row 的所有列为例）：

.row {
  margin-right: -15px;
  margin-left: -15px;
}

这段代码会为所有 class 为 row 的列设置左右边距为负15像素，从而达到删除空格的效果。

方法2: 使用 no-gutters 类名

Bootstrap 4 还提供了一个更简单的方法来删除列之间的空格，即使用 no-gutters 类名。只需在所需的列的父元素上添加 no-gutters 类名即可。例如：

<div class="row no-gutters">
  <div class="col-sm-6">内容1</div>
  <div class="col-sm-6">内容2</div>
</div>

该代码将创建一个没有列之间空格的两列布局。

结论

以上是在 Bootstrap 4 中删除列之间空格的两种常用方法。您可以根据自己的需要选择适合自己的方法。