Twitter Bootstrap：如何将未知数量的跨度*放入行流体中？

Question

假设我有以下嵌套：

<div class="cointainer-fluid">
   <div class="row-fluid">
      <div class="span3">
         <!-- left sidebar here -->
      </div>
      <div class="span9">
         <!-- main content here -->
      </div>
   </div>
</div>

我想在主要内容区域中添加未知数量的<div class="span3"></div>。 （每个span3 都假设包含产品照片、名称、价格等。）当然，我的目标是响应。因此，我可能会显示 20 个产品，我想在宽屏幕上每“行”显示 5 个产品，然后在稍窄一点的屏幕上每“行”显示 4 个产品，然后是 3 个，然后是 2 个，然后是 1 个。例如（每个 X 代表一个产品）：

Wide Screen
row 1: X  X  X  X  X
row 2: X  X  X  X  X
row 3: X  X  X  X  X
row 4: X  X  X  X  X

Less Wide Screen
row 1: X  X  X  X
row 2: X  X  X  X
row 3: X  X  X  X
row 4: X  X  X  X
row 5: X  X  X  X

Even Less Wide Screen
row 1: X  X  X
row 2: X  X  X
row 3: X  X  X
row 4: X  X  X
row 5: X  X  X
row 6: X  X  X
row 7: X  X

看来我需要做嵌套行。但是，如果我这样做，那么我将只能在每个嵌套行中放置一定数量的产品。当屏幕宽度减小时，这会导致问题，例如（每个 X 代表一个产品）：

Wide Screen
row 1: X  X  X  X  X
row 2: X  X  X  X  X
row 3: X  X  X  X  X

Less Wide Screen
row 1: X  X  X  X
       X
row 2: X  X  X  X
       X
row 3: X  X  X  X
       X

如何在 Twitter Bootstrap 中做我想做的事？

Answer 1

我建议你不要在.row-fluid 中使用.span* 类来达到你的目的，因为所有块的宽度都是以百分比定义的。所以所有.span* 块只会根据窗口大小改变宽度。

只需定义您的自定义类，例如.product 和 float: left 尤其是和高度：

.product{
    width: 150px;
    height: 60px;
    float: left;
}

并将所有块放在一个容器中，没有任何行。浏览器将完成剩下的工作。

示例：http://jsfiddle.net/GmVJy/1/