Bootstrap 4、列与列之间的间距没有换行到下一行

Question

我想弄清楚如何在我的列之间包含一点边距（使用 Bootstrap 4 网格系统），以便它们之间有一点点 space，没有一列下降到下一行。我试着用谷歌搜索它，甚至尝试了这里找到的一些建议，但对我没有任何用处（可能是因为我发现的很多帖子都很旧）。预先感谢您的回复！ :)

这是我的代码：

<section  class="categories">
  <div class="container-fluid">
      <div class="row mt-1">
        <div class="col-xs-12 cat">
            <h4>Stars and &amp; Planets</h4>
        </div>
      </div>
      <div class="row mt-1">
        <div class="col-md-8 cat">
            <h4>Space Travel</h4>
        </div>
        <div class="col-md-4 cat">
            <h4>Worm Holes</h4>
        </div>
      </div>
  </div>
</section>

CSS:

.cat {
 height: 300px;
 background-color: #666;
 width: 100%;
}

Answer 1

默认情况下，列之间有一个间距。但是，通过将 background-color 应用于列，这不会很明显，因为间距是使用 padding 创建的，并且 background-color 将延伸到间距中。

查看此内容的一种方法是在列的内部元素上设置 background-color。像这样：

.cat {
 height: 100px;
}

.cat-inner {
  height: 100%;
  padding: 10px;
  background-color: #666;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<section class="categories">
  <div class="container-fluid">
    <div class="row mt-1">
      <div class="col-12 cat">
        <div class="cat-inner">
          <h4>Stars and &amp; Planets</h4>
        </div>
      </div>
    </div>
    <div class="row mt-1">
      <div class="col-8 cat">
        <div class="cat-inner">
          <h4>Space Travel</h4>
        </div>
      </div>
      <div class="col-4 cat">
        <div class="cat-inner">
          <h4>Worm Holes</h4>
        </div>
      </div>
    </div>
  </div>
</section>

此设置也可能会解决您的问题，因为现在每一列之间都有视觉上的分隔。

可以通过一些简单的 CSS 来改变间距宽度，以减少列之间的 space。更改将根据您使用 Bootstrap - Sass/Less、CSS 等的方式而有所不同。对于一些简单的 CSS，您可以使用：

[class*="col-"] {
  padding-left: 5px;
  padding-right: 5px;
}

这个有点奇怪的 CSS 选择器将匹配所有在 class 属性中包含 col- 的元素。即 col-8、col-12、col-md-8 等。结果为：

注意： 下面的示例使用 !important，但在大多数情况下这不是必需的。由于 SO 加载 Bootstrap CSS 的方式，此示例中需要 !important。

.cat {
  height: 100px;
}

[class*="col-"] {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.cat-inner {
  height: 100%;
  padding: 10px;
  background-color: #666;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<section class="categories">
  <div class="container-fluid">
    <div class="row mt-1">
      <div class="col-12 cat">
        <div class="cat-inner">
          <h4>Stars and &amp; Planets</h4>
        </div>
      </div>
    </div>
    <div class="row mt-1">
      <div class="col-8 cat">
        <div class="cat-inner">
          <h4>Space Travel</h4>
        </div>
      </div>
      <div class="col-4 cat">
        <div class="cat-inner">
          <h4>Worm Holes</h4>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap 4、列与列之间的间距没有换行到下一行

Bootstrap 4, gutters between columns without wrapping to the next line

css

grid

bootstrap-4

responsive