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

我建议您不要在.span*内使用.row-fluid类，因为所有块的宽度都以百分比定义。因此，所有.span*块都只会根据窗口大小更改宽度。

只需定义您的自定义类，例如.product float: left，特别是＆height：

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

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

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

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

1 个答案: