twitter-bootstrap-3 – 如何使用Bootstrap 3.0增加列之间的填充

发布时间：2020-12-18 00:23:07 所属栏目：安全来源：网络整理

导读：我相对较新的编程和使用bootstrap 3.0制作网站. 我想在页面中间制作两行.对于第一行,我使用div class =“col-md-4 col-md-offset-2”,对于第二行div class =“col-md-4”. 我的第一个问题是,如果可以增加10行而不是12行,或者如果我还需要指定右边的2行呢？如

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

我想在页面中间制作两行.对于第一行,我使用div class =“col-md-4 col-md-offset-2”,对于第二行div class =“col-md-4”.

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

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

提前致谢.

解决方法

问题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#

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!