Twitter Bootstrap fluid spans broke template

Question

When i try to get a table with spans. I get fluid table. How to get a flat table without these strange spaces? Picture to explain what wrong:

Full listing of sourse page https://gist.github.com/2984012

Answer 1

you using the class thumbnails but not the child class thumbnail for the items in your code.

<div class="container">
<ul class="thumbnails">
    <!-- start item -->
    <li class="span3">
    <div class="thumbnail">
        <a href="#" title="" ><img src="http://placehold.it/260x180" alt=""></a>
        <h5><a href="#" title="" >Ruby on Rails Ringer</a></h5>
    <p>$17.99</p>
    </div>
    </li>
    <!-- end item -->    
</ul>
</div>

second you don't need the class row-fluid because thumbnails class using fluid out of the box.

<div class="">
  <div data-hook="homepage_products">

last point - I don't see your container in your code

<div class="container"> 

jsfiddle

Answer 2

No space at the beginning

Problem

The space that appears on the 3rd line is a "feature" of bootstrap : the first span of a container has no left margin.

[class*="span"]:first-child {
    margin-left: 0;
}

(source : https://github.com/twitter/bootstrap/blob/master/less/mixins.less#L613)

Fix

You can add an invisible .span element before the first item : that way the first item will have a space too.

<div class="span" style="display: none;"></div>

Hole in the layout

Problem

Your first item seems to be longer (in height).

Fix

It appears you have set a minimum height, but you should fix a maximum height, or ensure that there are no items longer than the minimum height.