引導：電子商務響應 - 正確的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設計模式

回答

相關問題