Bootstrap 4，列之间的排水沟而不换行到下一行答案

【问题标题】：Bootstrap 4, gutters between columns without wrapping to the next lineBootstrap 4，列之间的排水沟而不换行到下一行
【发布时间】：2017-11-28 14:37:36
【问题描述】：

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

这是我的代码：

<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%;
}

【问题讨论】：

对于“不换行”请参见：stackoverflow.com/questions/35993300/…

标签： css grid responsive bootstrap-4

【解决方案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 来更改装订线宽度，以减少列之间的空间。更改将根据您使用 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>

【讨论】：