Twitter Bootstrap 流体跨度破坏模板答案

【问题标题】：Twitter Bootstrap fluid spans broke templateTwitter Bootstrap 流体跨度破坏模板
【发布时间】：2013-03-26 01:00:35
【问题描述】：

当我尝试获取带有跨度的表时。我得到流体表。如何在没有这些奇怪空间的情况下获得一张平坦的桌子？用图片说明问题：

完整的源页面列表https://gist.github.com/2984012

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

开头没有空格

问题

出现在第 3 行的空格是 bootstrap 的“特征”：容器的第一个 span 没有左边距。

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

布局中的漏洞

问题

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

修复

您似乎设置了一个最小高度，但您应该确定一个最大高度，或确保没有比最小高度长的项目。

【讨论】：

但是有一个非常有趣的事情：如果我设置“span3”，我每行只能得到 3 个项目。但是，如果将“第一个孩子”应用于每个第 4 个项目。我们可以得到4个！每行项目。 imageshack.us/photo/my-images/208/22333290.jpg
@itsnikolay 您应该尝试使用 daniel glenn 回答有关使用 thumbnail 类而不是不可见元素的问题。

【解决方案2】：

您使用类 thumbnails 而不是子类 thumbnail 用于代码中的项目。

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

其次，您不需要 row-fluid 类，因为缩略图类使用开箱即用的流体。

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

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

<div class="container">

jsfiddle

【讨论】：

它使用
。但是还是不行jsfiddle.net/linuxbender/m6CNd