0

我想做的是一个带有 twitter 的 boostrap 的响应式产品列表......

假设我有 20 种产品的清单。

我希望它们跨越网站的宽度（默认为 940，不会更宽）......所以在这种（默认）情况下，我想连续显示 4 个产品......我知道这可能是像：

<div class="row">
    <div class="span3 product">.....</div>
    <div class="span3 product">.....</div>
    <div class="span3 product">.....</div>
    <div class="span3 product">.....</div>
</div>

<div class="row">
    <div class="span3 product">.....</div>
    <div class="span3 product">.....</div>
    <div class="span3 product">.....</div>
    <div class="span3 product">.....</div>
</div>

...

一切都好。但我想做的是，如果有人缩小页面，这个产品会缩小......而且它也有效......

到目前为止，一切都很好

现在，当网站的宽度低于 640 时，我希望这样。我每行只显示 3 个产品...如果 <480，则每行只显示 1 个产品...

所以这就是事情变得混乱的地方......因为每行有4个产品，所以HTML标记我必须用JS重新排列DOM，对吧？所以它看起来像....

<div class="row">
     <div class="span4 product">.....</div>
     <div class="span4 product">.....</div>
     <div class="span4 product">.....</div>
 </div>

 <div class="row">
     <div class="span4 product">.....</div>
     <div class="span4 product">.....</div>
     <div class="span4 product">.....</div>
 </div>

 ...

有没有更好的办法？

你能指点我一篇很好地讨论和解释这个话题的好文章吗？

编辑：

另一件事.. bootstrap 会自动为我在连续的跨度之间设置左右边距。如何在行之间应用相同的边距？

4

1 回答 1

1

您可以通过不使用 Bootstrap 的跨度来做到这一点。

只需要一个 span12 ，其中包含您向左浮动的所有项目。

将它们设置为在此级别具有 25% 的宽度。

然后使用媒体查询将它们设置为在最大宽度 640 处具有 33% 的宽度和在最大宽度 480 处具有 100% 的宽度。应该可以正常工作。

于 2013-03-21T11:27:46.987 回答