Question

我在使用bootstrap列时遇到问题。我想在列之间添加间隙，但它不起作用。您可以在我的代码段中看到所有.col-md-4填充col-md-10之间没有空格。这是我的片段：

.col-md-4{background-color:red;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12">
  <div class="col-md-10">
    <div class="row">
      <div class="col-md-4">Test</div>
      <div class="col-md-4">Test</div>
      <div class="col-md-4">Test</div>
    </div>
  </div>
</div>

Answer 1

我有一个Codepen附加了一个最好的方法，我发现用Bootstrap v3的bootstrap列控制Gaps的宽度（相当确定它也适用于Bootstrap v4）。

你的代码怎么了？

首先你有一个col-md-12包裹.col-md-10而没有一个带有row类的父容器，所以Bootstrap标准在很大程度上是错误的。您应该参考Bootstrap 3网格文档。

控制间隙/排水沟在下面的解释中：

修复：

默认情况下，

Boootstraps行的margin-left和margin-right -15px行col-*-*列的padding-left和padding-right { {1}}。因此，要完全控制列间隙大小，我们只需将15px上的负边距与row上的填充匹配即可。因此，您可以在列之间放置极大或小的间隙/排水沟，而不会影响页面的其余布局。

希望这有帮助！

https://codepen.io/Zlerp/pen/VzpNVj

Answer 2

   <style>
    .back{
       background-color:red;
    }
</style>
<div class="col-md-12">
  <div class="col-md-10">
    <div class="row">
        <div class=" col-md-4  ">
            <div class="back" >Test</div>
        </div>
        <div class=" col-md-4   ">
             <div class="back" >Test</div>
        </div>
        <div class=" col-md-4  ">
             <div class="back" >Test</div>
        </div>
   </div>
 </div>
</div>

Boostrap - 列之间的间隙

2 个答案:

你的代码怎么了？

修复：