如何在“响应”网格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的）的底部边缘。