如何在「響應」網格divs崩潰時保持「排水溝空間」？

Question

我使用最新的twitter引導來構建響應式網格網站。我有一個敏感的網格，如下所示的三個div：

<div class="row-fluid"> 
<div class="span4">...</div> 
<div class="span4">...</div> 
<div class="span4">...</div> 
</div> 

...並且這個按照預期通過bootsrap文檔工作。然而，我從HTML body背景顏色對這些div有單獨的背景顏色，當我拖動瀏覽器窗口到更小的寬度以「摺疊」div顯示在彼此的頂部時，它們之間的溝槽空間消失（創建看起來一個大的div與三個不同的div）是否有什麼我可以做的東西之間創建一些間隔空間時，寬度變得足夠小，導致他們垂直堆疊？

Answer 1

你有幾個選項...

（1）你可以定義一個類，並將其應用到你想有一個底邊距任何的div。

在你application.css（或類似）：

.mb10 {margin-bottom:10px;}

在HTML頁面中：

<div class="row-fluid"> 
    <div class="span4 mb10">....</div> 
    <div class="span4 mb10">....</div> 
    <div class="span4 mb10">....</div> 
</div> 

OR

（2）你可以確保你將您的div.span4內容打包成<p></p>標籤。

<div class="row-fluid"> 
    <div class="span4"><p>....</p></div> 
    <div class="span4"><p>....</p></div> 
    <div class="span4"><p>....</p></div> 
</div> 

自舉 - 印刷術部分：

http://twitter.github.io/bootstrap/base-css.html#typography

此外， <p>（段）收取一半的line-height （默認爲10px的）的底部邊緣。