Bootstrap 4，列之间的排水沟没有包装到下一行

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来改变，以减少列之间的空间。这种变化将取决于你如何使用引导 - 萨斯/减，CSS等。对于一些简单的CSS，你可以使用：

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

这有些奇怪CSS选择器将匹配包含col-中的所有元素的class属性。即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>