javascript - Bootstrap 新手——需要弄清楚布局问题

Question

我知道 Bootstrap 是一个基于网格的系统。我想要做的是创建一个类别页面(产品类别)，它可以包含屏幕允许的尽可能多的 DIV。基本上它是“反向响应”，因为 DIV 的数量随着屏幕变大而增加。

现在我似乎“卡住了”使用基于 Bootstrap 网格系统的一定数量的 DIV。也许我不应该为此使用 Bootstrap 布局功能？如果没有，我怎样才能完成我想做的事情？

例子:

如果在一个屏幕上我得到这个:

<div>
   <div>content</div>
   <div>content2</div>
   <div>content3</div>
   <div>content4</div>
</div>
<div>
   <div>content5</div>
   <div>content6</div>
   <div>content7</div>
   <div>content8</div>
</div>

在大屏幕上查看时应该是这样的:

<div>
   <div>content</div>
   <div>content2</div>
   <div>content3</div>
   <div>content4</div>
   <div>content5</div>
</div>
<div>
   <div>content6</div>
   <div>content7</div>
   <div>content8</div>
</div>

在更大的屏幕上它应该是:

<div>
   <div>content</div>
   <div>content2</div>
   <div>content3</div>
   <div>content4</div>
   <div>content5</div>
   <div>content6</div>
</div>
<div>
   <div>content7</div>
   <div>content8</div>
</div>

有没有办法(任何方式)来完成这个？

谢谢!

更新:对于那些需要可视化的人，这是我的布局图像，只有 4 列，但如果屏幕更大，我希望它增加到 5、6、7 甚至 8 列:

Answer 1

我认为(也许)您在这里寻找的是 bootstrap(至少 2)默认执行的操作 - 12 列根据页面大小按需要换行。你想要做的是在你的 div 上使用一个类来设置 div 将占用的列数。差不多，你正在看的是这个:

<div class="span2">First Column</div>
<div class="span2">Second Column</div>
<div class="span2">Third Column</div>
<div class="span2">Fourth Column</div>
<div class="span2">Fifth Column</div>
<div class="span2">Sixth Column</div>

然后就让 bootstrap 发挥它的魔力吧。尝试调整窗口大小，它应该根据窗口大小正确 float 列(换句话说，它应该是响应式的)。如果你想让一列更大，只需更改跨度中的数字(向上)并确保从其他跨度中删除相同的数量。希望对您有所帮助!

注意:对于 bootstrap3，语法不同(参见 this page 上的“.col-md-*”)