如何添加自舉列之間的保證金沒有包裝

113

Current Layout

在中心柱，我要添加的每個Server事業部之間的小幅度。但是，如果我添加保證金的CSS，它最終換行，尋找類似這樣的

Attempted Change

<div class="row info-panel"> 
    <div class="col-md-4 server-action-menu" id="server_1"> 
     <div> 
      Server 1 
     </div> 
    </div> 
    <div class="col-md-4 server-action-menu" id="server_2"> 
     <div> 
      Server 2 
     </div> 
    </div> 
    <div class="col-md-4 server-action-menu" id="server_3"> 
     <div> 
      Server 3 
     </div> 
    </div> 
    <div class="col-md-4 server-action-menu" id="server_4"> 
     <div> 
      Server 4 
     </div> 
    </div> 
    <div class="col-md-4 server-action-menu" id="server_5"> 
     <div> 
      Server 5 
     </div> 
    </div> 
    <div class="col-md-4 server-action-menu" id="server_6"> 
     <div> 
      Server 6 
     </div> 
    </div> 
    <div class="col-md-4 server-action-menu" id="server_7"> 
     <div> 
      Server 7 
     </div> 
    </div> 
</div>

而CSS

.server-action-menu { 
    background-color: transparent; 
    background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%); 
    background-repeat: repeat; 
    border-radius:10px; 
} 

.info-panel { 
    padding: 4px; 
}

我試圖做加頁邊距這

.info-panel > div { 
    margin: 4px;  
}

如何添加一個邊緣到DIV，以便他們不離開在右側有很多空間？

來源

2013-09-25 Andy

嘗試添加'盒大小：邊界box'風格的div。 –

140

您應該使用內部容器上的填充而不是邊距。嘗試這個！

HTML

<div class="row info-panel"> 
    <div class="col-md-4" id="server_1"> 
     <div class="server-action-menu"> 
      Server 1 
     </div> 
    </div> 
</div>

CSS

.server-action-menu { 
    background-color: transparent; 
    background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%); 
    background-repeat: repeat; 
    border-radius:10px; 
    padding: 5px; 
}

來源

2013-09-25 17:00:39

對這一個很好的呼籲，我從來沒有想過要從內部做到這一點。 – ARLCode

謝謝！改變內部填充是不錯的主意！ – haifzhan

變化@grid-columns數量。然後使用-offset。更改列數將允許您控制列之間的空間量。例如。

variables.less（大約294行）。

@grid-columns:    20;

someName.html

<div class="row"> 
    <div class="col-md-4 col-md-offset-1">First column</div> 
    <div class="col-md-13 col-md-offset-1">Second column</div> 
</div>

來源

2014-08-06 23:48:09

@ShaunLuttin而不是將偏移量類添加到所有模板的所有div以創建保證金，是不是還有更全面的解決方案？在http://stackoverflow.com/questions/26016396/add-gutter-margin-between-bootstrap-columns/26016735#26016735有相同的問題，但在所有地方添加偏移類是不是真的可以維護.. –

@GeorgeKatsanos你可以使用'.make-md-column-offset（）'mixin來完成。另外，考慮玩'@ grid-gutter-width'變量。 –

如果沒有需要添加列的邊框，你也可以簡單地將它們添加一個透明邊框：

[class*="col-"] { 
    background-clip: padding-box; 
    border: 10px solid transparent; 
}

來源

2014-10-16 13:24:40 Seb33300

好戲，如果你不能使用background-clip：padding-box（它是CSS3），請用你的頁面背景的相同顏色設置邊框;） – Frank

我面臨同樣的問題;下面的工作對我很好。希望這有助於有人登陸這裏：

<div class="row"> 
    <div class="col-md-6"> 
     <div class="col-md-12"> 
      Set room heater temperature 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div class="col-md-12"> 
      Set room heater temperature 
     </div> 
    </div> 
</div>

這會自動渲染2個div之間的一些空間。

來源

2016-05-27 13:18:22

你是先生，是英雄。 –

這是一個被接受的答案。 – Khaleel

這很好用，特別是當背景顏色很重要時。也在[這個答案]中提到（https://stackoverflow.com/a/29576362/1998086）。 – Leo

最簡單的方法做，這是一個div內做一個div

<div class="col-sm-4" style="padding: 5px;border:2px solid red;"> 
 
    <div class="server-action-menu" id="server_1">Server 1 
 
    </div> 
 
</div> 
 
<div class="col-sm-4" style="padding: 5px;border:2px solid red;"> 
 
    <div class="server-action-menu" id="server_1">Server 2 
 
    </div> 
 
</div> 
 
<div class="col-sm-4" style="padding: 5px;border:2px solid red;"> 
 
    <div class="server-action-menu" id="server_1">Server 3 
 
    </div> 
 
</div>

來源

2016-07-15 16:34:48

如何添加自舉列之間的保證金沒有包裝

回答

相關問題