Dynamic String Length for Twitter-Bootstrap

Question

I am creating a layout where the content will look like a board, a bit like Pinterest. I am using Twitters-Bootstrap and have some layout issues.

I have a dynamic number of elements, so I thought that I can only have one line, and the elements will just wrap onto the next line. This, however, creates a som wierd space between the content paths (see image below).

I'm not a designer, so my question is, is there a way to use one line to display all blocks of content while still using fluid design?

Another way would be to add lines programmatically, but this seems like a problem that a stylesheet should solve, not business logic.

The code is as follows:

<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> <a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></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> <a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></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> <a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></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> <a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></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> <a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p> </div> </div> </li> </div> </div> 

Answer 1

Use the nth-child CSS property with media queries to remove the left margin in the first element of each row -

 .myclass > li:nth-child(4n+1) { margin-left: 0px; } 

Media requests are described here http://twitter.github.com/bootstrap/scaffolding.html

And nth-child is also used on Twitter Bootstrap.