html - 崩溃时如何在 "gutter space"网格 div 之间维护 "responsive"？

Question

我正在使用最新的 twitter bootstrap 构建响应式网格网站。我在响应式网格中有三个 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 - 排版部分:

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

In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).