添加兩個Div之間的差距

我有一個屏幕分爲兩部分，使用兩列。添加兩個Div之間的差距

<div class="row"> 
     <div class="col-md-6 well"> 
      Left Box 
     </div> 
     <div class="col-md-6 well"> 
      Right 
     </div> 
    </div>

我需要兩列之間的一個小的（大約10px）間隙。

http://www.bootply.com/vaOb1WdR5I

可以這樣做？

這兩個盒子都需要減少5個pix（在上面的例子中），因爲我需要保留總寬度。

編輯：一些想法幾乎工作，但我得到一個額外的好，我不想要。有了這個：

<div class="row"> 
     <div class="col-md-6"> 

       @Html.Action("ShowDuePayments", "Transaction") 

     </div> 
     <div class="col-md-6"> 

       @Html.Action("ShowRecentTransactions", "Transaction") 

     </div> 
    </div>

我得到這個：

enter image description here

的 '下' 以及DIV應該是不可見的。

來源

2014-09-23 Craig

變化沒有。 cols爲col-md-5，然後添加一個餘量0f 10px – Tushar 2014-09-23 08:04:07

很高興看到HTML輸出而不是截圖。看起來像col-md-6 divs中可能有class ='row'的div，因此消除了差距。 – NicoFerna 2014-09-23 08:54:54

一對夫婦的要點：

您不應該爲Bootstrap列添加額外的類（這不是一條堅硬而快速的規則，但是一個好的建議）
您錯過了容器包裝。

請使用這些規則的變化，它看起來是這樣的：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 

 

 
<div class="container"> 
 
\t <div class="row"> 
 
     <div class="col-md-6"> 
 
      <div class="row"> 
 
      <div class="col-md-12"> 
 
       <div class="well">Left Top Box</div> 
 
      </div> 
 
      </div> 
 
      <div class="row"> 
 
      <div class="col-md-12"> 
 
       <div class="well">Left Bottom Box</div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="col-md-6"> 
 
      <div class="well">Right Box</div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2014-09-23 08:03:46 DavidG

這是非常接近的權利。我唯一的問題是我不想要灰色背景。這些列應該是'不可見的'。可能？ – Craig 2014-09-23 08:17:48

@克雷格灰色是由於「好」類，我只是把它放在你的問題。我已經添加了另一行而沒有證明它們之間的差異。 – DavidG 2014-09-23 08:25:52

謝謝@DavidG。一旦我將這些井取出，它就會回到原點。即無間隙。我用井的例子的結果編輯了我的原始問題。它非常接近。我無法添加'容器'，因爲我的站點佈局中已經有了一個父容器 - 並且認爲你只有一個容器？ – Craig 2014-09-23 08:35:57

您可以更改類的col-md-6並添加width:49%，並且第二格添加pull-right類，如：

HTML：

<div class="row"> 
    <div class="col-md-6 well"> 
     Left Box 
    </div> 
    <div class="col-md-6 well pull-right"> 
     Right 
    </div> 
</div>

CSS：

.col-md-6{ 
    width:49%; 
}

來源

2014-09-23 08:02:16

您也可以嘗試填充添加兩個div標籤即：

.col-md-6{ 
    padding:5px; 
}

這將增加有點填充到所有的邊 - 除非你使用padding-left & padding-right併爲div分配不同的類名 - 取決於你想如何代碼被佈局。

來源

2014-09-23 08:05:04 heinkasner

這個怎麼樣？

<div class="row"> 
    <div class="col-md-6" style='padding-right:5px'> 
     <div class='well'> 
     Left Box 
     </div> 
    </div> 
    <div class="col-md-6" style='padding-left:5px'> 
     <div class='well'> 
     Right 
     </div> 
    </div> 
</div>

http://www.bootply.com/Ogrte6IQzw

如果刪除內嵌樣式，你將不得不通過引導提供的天然間距，這是15px的填充。

來源

2014-09-23 08:05:34 NicoFerna

+1比我的好得多*（已刪除）*。這是因爲對所有'*'元素應用了'box-sizing：border-box'。 – 2014-09-23 08:25:44

您還可以使用其他類，因此您只能修改特殊的第6列元素，而不是全部在您的網站上。這個例子也使用基於百分比的寬度作爲Flopet17s。您可以調整百分比數字以更好地適合您所需的間隙寬度。

.withgap { 
 
    width: 49%; 
 
    margin-right:1%; 
 
}

<div class="row"> 
 
    <div class="col-md-6 well withgap"> 
 
    Left Box 
 
    </div> 
 
    <div class="col-md-6 well"> 
 
    Right 
 
    </div> 
 
</div>

來源

2014-09-23 08:05:48 sebomoto

添加兩個Div之間的差距

回答

相關問題