Question

我相对较新的编程和使用bootstrap 3.0制作网站。

我想在页面中间制作两行。对于第一行，我使用div class="col-md-4 col-md-offset-2"，第二行使用div class="col-md-4"。

我的第一个问题是，如果可以增加10行而不是12行，或者如果我还需要指定右边的2行呢？如果是这样，怎么办呢？

另外我想增加列之间的水平间距。我对此进行了一些研究并遇到了mixins，但它很难让我掌握。如果这里的任何人都可以为我提供一种简单的方法来增加两列之间的水平间距，那将是很好的。

提前致谢。

Answer 1

看起来这就是你想要的

<div class="container">
  <div class="row">
     <div class="col-md-4 col-md-offset-2">col-md-4-offset</div>   
      <div class="col-md-4">col-md-4</div>
   </div>
 </div>

将列添加到12

完全没问题

这是一个bootply

如果要填充行，只需向.row类添加填充，默认情况下行之间没有填充或边距

Answer 2

问题1：是的，在您的专栏之后留下悬空空间可以，但通过关闭.row之后将其绑定是很好的做法。

问题2：您可以在列的左侧和右侧添加边距。但是这会抛弃偏移列，所以通过在它们之前放置一个空.col-md-2来绕过它。

<div class="container">
  <div class="row">
   <div class="col-md-2"></div><!-- empty -->
    <div class="col-md-4 margin">col-md-4</div>
    <div class="col-md-4 margin">col-md-4</div>
  </div>
</div>

CSS：

.margin {
  margin-left:10px;
  margin-right:10px;
  }

演示：http://www.bootply.com/OS6FX9sie8#

另外，您在我的演示中会注意到我将自定义类放在媒体查询中。如果您希望将边距调整仅应用于大屏幕设备，请执行此操作，以便列到达手机上的屏幕边缘。

如何使用Bootstrap 3.0增加列之间的填充

2 个答案: