Twitter Bootstrap流体跨越破坏模板

Question

当我尝试使用跨度表时。我得到流动的桌子。 如何在没有这些奇怪空间的情况下获得平台？ 图片解释错误：

标题页https://gist.github.com/2984012

的完整列表

Answer 1

开头没有空格

问题

第3行显示的空格是bootstrap的“特征”：容器的第一个跨度没有左边距。

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

（来源：https://github.com/twitter/bootstrap/blob/master/less/mixins.less#L613）

修复

您可以在第一个项目之前添加一个不可见的.span元素：这样第一个项目也会有一个空格。

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

布局中的洞

问题

你的第一个项目似乎更长（高度）。

修复

您似乎已设置了最小高度，但应修正最大高度，或确保没有项目长度超过最小高度。

Answer 2

您使用班级缩略图而非儿童班缩略图作为代码中的项目。

<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>

第二，你不需要类行 - 流，因为缩略图类使用开箱即用的流体。

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

最后一点 - 我没有在你的代码中看到你的容器

<div class="container"> 

jsfiddle