css - 推特 Bootstrap : how to put unknown number of span* within a row-fluid?

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* 类，因为所有 block 的宽度都以百分比定义。所以所有的 .span* block 只会根据窗口大小改变宽度。

只需定义您的自定义类，例如.product 带有 float: left 和特定的高度:

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

并将所有 block 放入一个容器中，不带任何行。浏览器将完成剩下的工作。

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