引导：电子商务响应 - 正确的HTML设计模式

什么，我想要做的是产品与Twitter的自举一个响应列表...引导：电子商务响应 - 正确的HTML设计模式

让说，我有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个产品，所以我必须用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> 

...

有没有更好的方法？

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

编辑：自动连续对我来说跨度之间

一件事....引导不左，右页边距。我怎样才能实现在行之间应用相同的边距？

来源

2013-03-20 DS_web_developer

您可能想要使用行流体而不是仅行。 http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem – 2013-03-20 21:39:53

当然，我知道......谢谢......但仍然没有解决我的问题 – 2013-03-21 08:16:57

你可以通过不使用Bootstrap的跨度来做到这一点。只需要一个span12，其中包含您的所有物品左侧浮动。将它们设置为在此级别具有25％的宽度。然后使用媒体查询设置它们在最大宽度640时宽度为33％，最大宽度480时宽度为100％。应该可以正常工作。 – 2013-03-21 09:31:58

您可以通过不使用Bootstrap跨度来实现这一点。

只有一个span12包含您左侧的所有物品。

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

然后使用媒体查询设置它们在最大宽度为640时宽度为33％，最大宽度为480时宽度为100％。应该可以正常工作。

来源

2013-03-21 11:27:46

引导：电子商务响应 - 正确的HTML设计模式

回答

相关问题