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

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#

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