如何在“响应式”网格 div 折叠时保持“排水沟空间”？

Question

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

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

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

来自引导程序 - 排版部分：

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

此外， <p>（段落）的下边距为行高的一半 （默认为 10 像素）。