twitter引导网格系统。 列之间的间距

我确信这个问题有一个简单的解决方案。 基本上,如果我有两列,我怎么能在它们之间增加一个空格?

例如,如果html是:

<div class="col-md-6"></div>
<div class="col-md-6"></div>

输出只是两列紧挨在一起,占据整个页面的宽度。 假设宽度设置为1000px那么每个div的宽度将是500px

如果我想要两个100px之间的空间,我怎么能做到这一点? 很显然,通过自举,div大小将变为450px以弥补空间


您可以使用col-md-offset-*类实现列之间的间距,这里记录。 间距是一致的,以便所有列正确排列。 要获得均匀的间隔和列大小,我会做以下几点:

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

我面临同样的问题; 下面的工作对我很好。 希望这有助于有人在这里登陆:

<div class="row">
  <div class="col-md-6">
     <div class="col-md-12">
        Some Content.. 
     </div>
  </div>
  <div class="col-md-6">
     <div class="col-md-12">
        Some Second Content.. 
     </div>
  </div>
</div>

这会自动在2个div之间渲染一些空间。

在这里输入图像描述


我知道我迟到了派对,但你可以尝试用填充来填充框。

<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>

CSS:

.box {
    padding: 0 5px 0 5px;
}
.box .inner {
    background-color: #fff;
}

去看看吧

链接地址: http://www.djcxy.com/p/94723.html

上一篇: twitter bootstrap grid system. Spacing between columns

下一篇: How to remove space rows and columns in table in html