Dynamic length of rows for Twitter-Bootstrap - css

Question

I am creating mockup where the content will look like a board, a little like Pinterest. I am using Twitters-Bootstrap, and are having some issues with the layout.
I have a dynamic amount of elements, so I thought I could just have one row, and the items would then just wrap to the next line. This, however, creates som wierd space between the content-spans (see image below).
I am not a designer, so my question is, if there is a way to use one single row to display all the content blocks, still using the fluid design?
Another way would be to programmatically add the rows, but it seems like a problem which the stylesheet and not business logic should solve.
The code looks like this:
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<li class="span3 pdt10">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>
Thumbnail label</h5>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
Action Action</p>
</div>
</div>
</li>
<li class="span3 pdt10">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>
Thumbnail label</h5>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
Action Action</p>
</div>
</div>
</li>
<li class="span3 pdt10">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>
Thumbnail label</h5>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
Action Action</p>
</div>
</div>
</li>
<li class="span3 pdt10">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>
Thumbnail label</h5>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
Action Action</p>
</div>
</div>
</li>
<li class="span3 pdt10">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>
Thumbnail label</h5>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
Action Action</p>
</div>
</div>
</li>
</div>
</div>

Answer 1

Use the CSS property nth-child with media queries to remove the left margin on the first element of each line -
.myclass > li:nth-child(4n+1) {
margin-left: 0px;
}
Media queries are explained here http://twitter.github.com/bootstrap/scaffolding.html
And nth-child is used in Twitter Bootstrap as well.