Twitter Bootstrap流体跨越了模板

its*_*lay 6 twitter-bootstrap

当我试图获得一个跨度的表.我得到流动的桌子.如何在没有这些奇怪空间的情况下获得平台?图解释错了什么:

流体表

完整列出的sourse页面https://gist.github.com/2984012

She*_*row 6

一开始没有空间

问题

第3行出现的空间是bootstrap的"特征":容器的第一个跨度没有左边距.

[class*="span"]:first-child {
    margin-left: 0;
}
Run Code Online (Sandbox Code Playgroud)

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

固定

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

<div class="span" style="display: none;"></div>
Run Code Online (Sandbox Code Playgroud)

布局中的洞

问题

你的第一个项目似乎更长(高度).

固定

您似乎已设置了最小高度,但应确定最大高度,或确保没有超过最小高度的项目.


the*_*rce 5

您使用类缩略图但不使用代码中项目的子类缩略图.

<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>
Run Code Online (Sandbox Code Playgroud)

第二,你不需要类行流体,因为缩略图类使用流体开箱即用.

<div class="">
  <div data-hook="homepage_products">
Run Code Online (Sandbox Code Playgroud)

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

<div class="container"> 
Run Code Online (Sandbox Code Playgroud)

的jsfiddle