使用Bootstrap 3.0的网格布局

我需要使用Bootstrap 3.0创建一个网格布局，并在列之间留有空白。我使用了一行和4列，宽度为3的列。然而，它们全部出现在一起，没有任何空间。我怎么能这样做？使用Bootstrap 3.0的网格布局

实施例：

<div class="row"> 
    <div class="col-lg-3" style="background-color: grey;"> 
    col1 
    </div> 
    <div class="col-lg-3" style="background-color: grey;"> 
    col2 
    </div> 
    <div class="col-lg-3" style="background-color: grey;"> 
    col3 
    </div> 
    <div class="col-lg-3" style="background-color: grey;"> 
    col4 
    </div> 
</div>

来源

2013-08-16 Caumons

你看过[这里]（http://getbootstrap.com/css/#grid）吗？ –

请参阅我对评论的回答，我已经引用了相同的链接。它并没有说如何在列之间留下空间。如果你使用保证金，那么有宽度溢出 – Caumons

考虑到我在2分钟之前发布了链接，你几乎把你放在一个奇怪的地方，不是吗？而且，你不遵循那里提到的代码。尝试'col-md- *' –

经过与@ShaharGalukman的讨论，似乎Bootstrap 3.0本身不支持该功能。所以，我做的是：

使用Bootstrap 3.0语法创建网格，并将所有列组合在一起。然后，我不是将背景颜色设置为col div，而是在每个col内创建了一个新的div，其中包含background-color设置。这样你就有了列之间的分隔。您可以使用新div的margin调整空格。设置一个margin: -15px不会在列之间留下空间。

希望这可以帮助别人！

<div class="row"> 
    <div class="col-lg-3"> 
    <div style="background-color: grey;"> 
     col1 
    </div> 
    </div> 
    <div class="col-lg-3"> 
    <div style="background-color: grey;"> 
     col2 
    </div> 
    </div> 
    <div class="col-lg-3"> 
    <div style="background-color: grey;"> 
     col3 
    </div> 
    </div> 
    <div class="col-lg-3"> 
    <div style="background-color: grey;"> 
     col4 
    </div> 
    </div> 
</div>

来源

2013-08-16 21:04:51 Caumons

我从来没有使用或听到的自举类的 “COL-LG-3”。我使用“spanX”，其中X是12列网格中的列数。

<div class="row"> 
    <div class="span3" style="background-color: grey;"> 
    col1 
    </div> 
    <div class="span3" style="background-color: grey;"> 
    col2 
    </div> 
    <div class="span3" style="background-color: grey;"> 
    col3 
    </div> 
    <div class="span3" style="background-color: grey;"> 
    col4 
    </div> 
</div>

来源

2013-08-16 20:26:34 ktm5124

BS 3.0对网格类使用完全不同的命名系统。 –

哦......我明白了。 :-( – ktm5124

使用'span'是Bootstrap 2的语法，新版本3使用不同的语法，请参阅http://getbootstrap.com/css/#grid – Caumons

使用Bootstrap 3.0的网格布局

回答

相关问题