Bootstrap響應CSS

我有一個四列設計，我使用Bootstrap。該設計在移動設備的單列中呈現得很好，但是在「（最小寬度：768px）和（最大寬度：979px）」中，雖然只有兩個空間，但我得到了四列。很顯然，行/跨度設置需要重新考慮這些尺寸。Bootstrap響應CSS

我可以想象這樣做的唯一方法是在HTML中使用語義CSS類，並且只使用LESS在CSS中包含網格類，然後根據屏幕大小，包括不同的網格類來實現四個或兩個列布局。不知道這是否會起作用。

這是要走的路，還是我覺得這太複雜了？

謝謝！

編輯：這是行不通的。它只導入直接適用於.row的規則，沒有涉及更復雜的規則.row。我認爲這將起作用的原因是我曾看到有人在SASS的某個其他網格上做過這件事。思考？

.header{ 
    .row; 
}

同樣在：https://groups.google.com/forum/#!topic/twitter-bootstrap/R5jEp0oQ_-E

來源

2012-09-25 savolai

Twitter Bootstrap，也就是說。（這個標題應該是「大屏幕4列，小屏幕2列，手機1屏幕，是否需要響應式佈局？」，但stackExchange有一個呃逆，我忘了修正標題之後）。 – savolai

要回答您的評論中的問題。製作響應式佈局不需要LESS。 –

不知道這是你在想什麼，但也許你可以個性化這個頁面的部分，並使用這樣的事情？

@gridColumnWidth: 60px; // example width declared in bootstrap 

@media only screen and (min-width: 768px) and (max-width: 979px) { 
    .yourClass { 
     max-width: @gridColumnWidth * 2 
    } 
}

來源

2012-10-05 23:21:41 newpxsn

謝謝。這與Google小組的建議類似，儘管當然使用LESS是一個優點。儘管如此，我還是喜歡使用Bootstrap的行/列語義，而不是觸及寬度。作爲一個面向對象的開發人員，我有這種理想的封裝在我腦海中，但我不知道這裏適用多遠。如果Bootstrap發展了，你會希望它們創建的語義無論如何都能正常工作，但是如果你依賴像GridColumnWidth這樣的「內部」變量，那麼它可能會在將來破壞。 – savolai

Bootstrap響應CSS

回答

相關問題