How to maintain "gutter space" between "responsive" grid divs when they collapse? - html

Question

Im using the newest twitter bootstrap to construct a responsive grid website. i have three divs across a responsive grid like so:
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>
...and this works as intended via the bootsrap documentation. However I have a separate background color on these divs from the html body background color, and when i drag the browser window to a smaller width to "collapse" the divs to show on top of each other, the gutter space between them disappears (creating a look of one big div versus three separate ones) is there anything i can do to create some gutter space between the divs when the width gets small enough to cause them to stack vertically?

Answer 1

You have a couple options...
(1) You could define a class and apply it to any divs you want to have a bottom margin.
In your application.css (or similar):
.mb10 {margin-bottom:10px;}
In your html page:
<div class="row-fluid">
<div class="span4 mb10">....</div>
<div class="span4 mb10">....</div>
<div class="span4 mb10">....</div>
</div>
OR
(2) You could make sure you wrap your div.span4 content in <p></p> tags.
<div class="row-fluid">
<div class="span4"><p>....</p></div>
<div class="span4"><p>....</p></div>
<div class="span4"><p>....</p></div>
</div>
From the Bootstrap - Typography section:
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).