將移動和桌面與網格系統混合

Bootstrap文檔指出，對於單個水平塊，網格列應該加起來多達12個。不僅如此，無論視口如何，列都開始堆疊。然後，它前進到給混合移動設備和桌面的示例：將移動和桌面與網格系統混合

enter image description here

所以.COL-MD-8和.COL-MD-4添加最多12個，所以他們應該保持在一個水平塊。然而，.col-xs-12和.col-xs-6的總和不會高達12.我的假設是，我們將xs和md混合使用，因爲我們希望它們都出現在單個水平塊上，以顯示它們各自的設備。所以不會.col-xs-12和.col-xs-6堆棧？如果不是，爲什麼？

來源

2015-05-04 Donato

是的，他們會疊加在移動 - .COL-XS-12將有100％的寬度，而。 col-xs-6的寬度將爲容器的50％ –

@JamesKing然後我不明白他們在這個例子中完成了什麼。 .col-md-8和.col-md-4將出現在桌面屏幕上的一個區塊中，而.col-xs-12和.col-xs-6將出現在由堆疊產生的電話上的兩個區塊中。因此，他們在兩個設計上看起來不一樣。這裏的意圖不是讓它們在移動和桌面上顯示相同嗎？ – Donato

我想他們正試圖說明如何通過簡單地根據屏幕大小更改列數來完成不同的佈局。如果您閱讀http://getbootstrap.com/css/#grid'<！>示例中的代碼註釋，您可以看到這一點：<！ - 通過製作一個全寬和另一個半寬來堆疊移動設備上的列 - >' – j08691

xs-*類目標設備< 768px而md-*類目標≥992px。

所以如果你是在手機上（< 768px）只看xs類而忽略md類。你將有12 + 6，因爲每行只有12列您的div應該是這樣的：

------------ <-- xs-12 
------  <-- xs-6

來源

2015-05-04 21:50:09

將移動和桌面與網格系統混合

回答

相關問題