1

假设我有以下嵌套：

<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 中做我想做的事？

4

1 回答 1

2

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

只需定义您的自定义类，例如.product使用float: left和特别使用和高度：

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

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

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

于 2013-06-29T23:09:38.280 回答