中間沒有間隙的兩列（col-md-6）？

在Bootstrap中，我使用col-md-6來提供兩列，但如何消除中間的空隙並填充空格？中間沒有間隙的兩列（col-md-6）？

例如在Photoshop：

enter image description here

HTML代碼：

 <div class="row"> 
      <div class="col-md-6"> 
       <div class="blue-section"> 
        1 
       </div> 
      </div> 
      <div class="col-md-6"> 
       <div class="red-section"> 
        2 
       </div> 
      </div> 
     </div>

注：我只是想申請這部分而已，並非一切默認。

來源

2014-09-23 user1246800

假設你只想觸摸背景，那麼你不需要做任何事情。 Bootstrap中的列水溝（在您的photoshop文件中由藍線表示）由填充生成。所以，你可以簡單地執行以下操作來實現什麼在你的Photoshop文件：

HTML：

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6 blue-section">    
     1  
    </div> 
    <div class="col-md-6 red-section">    
     2    
    </div> 
    </div> 
</div>

CSS：

.blue-section{background:blue;} 
.red-section{background:red;}

這將導致仍然具有填充你的內容。

來源

2014-09-23 11:59:03 jme11

-1

使用此：

<div class="row"> 
    <div class="col-md-6"> 
     <div class="blue-section"> 
      1 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div class="red-section"> 
      2 
     </div> 
    </div> 
</div>

將實現的是，有你加入了div任何填充或利潤率？默認情況下，引導行/列沒有。所以它必須與.red部分& .blue-section上的css相關聯。

我添加了一個背景顏色到的cols所以你可以看到，http://jsfiddle.net/bnyrL54u/

希望這有助於。

來源

2014-09-23 11:57:50 Josh90

只是一個修正點：默認情況下，Bootstrap中的所有類都有15px的左右填充。所有行默認都有-15px的左右邊距，所有容器（容器和容器流體）都有15px的左右邊距。這是網格的工作原理。我在這裏的答案可能會幫助你更好地理解這一點：http://stackoverflow.com/questions/23899715/bootstrap-balancing-bulletcolumn – jme11 2014-09-23 12:07:50

我認爲你必須把你的結構是這樣

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6"> 
     <div class="row">1</div> 
    </div> 
    <div class="col-md-6">    
     <div class="row">2</div> 
    </div> 
    </div> 
</div>

來源

2014-09-23 12:15:04

使用.row切緣陰性刪除列之間的排水溝（填充）..

<div class="row"> 
    <div class="col-md-6"> 
    <div class="row blue-section"> 
     1 
    </div> 
    </div> 
    <div class="col-md-6"> 
    <div class="row red-section"> 
     2 
    </div> 
    </div> 
</div>

演示：http://www.bootply.com/TytFvxummt

來源

2014-09-23 12:18:04 ZimSystem

我會給這個答案滴答！ +1 – 2014-09-23 13:48:40

中間沒有間隙的兩列（col-md-6）？

回答

相關問題