html - 如何在“响应式”网格 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>

从 Bootstrap - Typography 部分：

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

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