Bootstrap：在列之間添加間距

我是自舉新手，正試圖弄清楚如何在第二個row-fluid的container-fluid中的框之間放置間距。我正在嘗試使用class="col-lg-4 col-md-6 item col-xs-12"，因此我的網頁在大屏幕上有三列，在平板電腦上有兩列，移動設備上有一列。Bootstrap：在列之間添加間距

我已經制定了以下bootply以證明我在哪裏卡住：

bootply example

這個例子有兩行，我想補充的間距愨的COL1，COL2，COL3盒。

我曾嘗試將margin-left= 4px;添加到#col1 css，但似乎使col3卡在col1下面。

來源

2014-12-02 dubbbdan

我想推薦一個更多的解決方案。

作出更大的div每個＃COL1內：

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div id="start" class="span12"> 

     Line1<br> 
     Line2<br> 
    </div> 
    </div> 
    <div calss="row-fluid"> 
    <div class="col1 col-lg-4 col-md-6 item col-xs-12"><div class="col-inside"> Col1 </div></div> 
    <div class="col1 col-lg-4 col-md-6 item col-xs-12"><div class="col-inside"> Col2 </div></div> 
    <div class="col1 col-lg-4 col-md-6 item col-xs-12"><div class="col-inside"> Col3 </div></div> 
    </div>

，並添加COL1的孩子的風格，以你的CSS

#start { 
    background-color: #f1f2f6; 
    margin-bottom:8px; 
} 

.col1 { 
    background-color: #f1f2f6; 
    margin-bottom: 4px; 
} 

.col-inside { 
    border: solid 2px #000000; 

} 
.col1:first-child { 
    padding: 0 4px 0 0; 
} 
.col1:nth-child(2) { 
    padding: 0 4px; 
} 
.col1:last-child { 
    padding: 0 0 0 4px; 
}

這讓右頁邊距4PX和0像素爲左一個在第一欄，左邊距最後一列爲4px，中間列爲4px左右頁邊距爲3列。這裏是bootply link

來源

2014-12-02 18:19:49 Banzay

在html頁面中，Ids應該是唯一的。如果你想對一個以上的元素應用一些CSS規則，你必須使用類。 – Lykos 2014-12-03 09:34:42

當然你是對的。瘋狂的混亂。但問題是關於差距。我更改了代碼。 – Banzay 2014-12-03 13:03:56

您的意思是offsetting collumns ???

您可以使用col-md-offset- *類來實現。例如：

<div class="row"> 
    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> 
</div>

來源

2014-12-02 17:46:53 Lykos

我不想抵消一些列，而不是4px。我不確定是否需要更改'bootstrap.css'中的某些內容，或者是否需要編寫自己的CSS。 – dubbbdan 2014-12-02 17:49:19

我相信偏移類爲元素留下了餘量，所以你可以做類似的事情。也許創建一個類.myOffset {margin-left：4px; }並將其賦值給元素，或者您可以通過執行像這樣的操作來指定偏移量類別的左側空白邊緣#anId .col-md-offset-4 {margin-left：4px; } – Lykos 2014-12-02 17:53:50

基本上你可以覆蓋引導CSS自己 – Lykos 2014-12-02 17:55:00

Bootstrap：在列之間添加間距

回答

相關問題