Question

我正在试图弄清楚如何在我的列之间包含一些余量（使用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%;
}

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更改装订线宽度，以减少列之间的空间。更改将根据您使用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，列之间的排水沟，没有包裹到下一行

1 个答案: