如何在“响应式”网格div崩溃之间保持“阴沟空间”？

Question

我使用最新的twitter引导程序来构建响应式网格网站。我在响应式网格中有三个div，如下所示：

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

...这可以通过bootsrap文档按预期工作。但是我在html主体背景颜色的这些div上有一个单独的背景颜色，当我将浏览器窗口拖动到较小的宽度以“折叠”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>

或

（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>

来自Bootstrap - 排版部分：

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

  

此外，   <p>（段落）的下限为其行高的一半   （默认为10px）。