html - 如何在没有间距的情况下进行多跨度推特 Bootstrap

Question

我试图在 Bootstrap 中让页面上有 3 列，它们之间没有任何间距

这是我得到的:

这是我想要的:

这是我目前使用的代码:

<div class="row">
    <div class="span4 blue1">
        <h1>span4 (1)</h1>
    </div>
    <div class="span4 blue2">
        <h1>span4 (2)</h1>
   </div>
    <div class="span4 blue3">
        <h1>span4 (3)</h1>
    </div>
</div>

我真的不确定如何使用 bootstrap 实现我想要的 - 感谢任何帮助

Answer 1

您可以创建自己的类来移除 span 网格元素之间的空间，如下所示:

CSS

.no-space [class*="span"] {
    margin-left: 0;
}

然后你可以将它包含在容器 .row div 中:

<div class="row no-space">
    <div class="span3 blue1">
        <h1>span4 (1)</h1>
    </div>
    <div class="span3 blue2">
        <h1>span4 (2)</h1>
   </div>
    <div class="span3 blue3">
        <h1>span4 (3)</h1>
    </div>
</div>

另请注意，.row 容器类删除了左侧的 20px 以容纳网格元素，因此您可能必须像这样删除它:

.no-space {
    margin-left:0;
}

所以尝试看看什么有效。

演示:http://jsfiddle.net/G36uQ/