使用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的網格佈局

回答

相關問題