我開始定製我的引導,至今我都非常相似,下面的模板的內容:自定義引導程序 - 如何更改一定寬度下的列數?
http://twitter.github.com/bootstrap/examples/fluid.html
,而不是有三個span4s但是,我有四個span3s。一旦瀏覽器達到一定的寬度,我想有三個span3s。然後,在另一個寬度上,兩個span3s。
有沒有辦法用直css來做到這一點?
我開始定製我的引導,至今我都非常相似,下面的模板的內容:自定義引導程序 - 如何更改一定寬度下的列數?
http://twitter.github.com/bootstrap/examples/fluid.html
,而不是有三個span4s但是,我有四個span3s。一旦瀏覽器達到一定的寬度,我想有三個span3s。然後,在另一個寬度上,兩個span3s。
有沒有辦法用直css來做到這一點?
您可以簡單地將.span3
的寬度減小爲媒體查詢中的寬度.span2
。
/* Bootstrap defaults: */
.span3 {
width:270px;
}
.span4 {
width:370px;
}
@media screen and (max-width: 1024px) and (min-width: 767px) {
/* Decreased span4 size within media query. */
.span4 {
width:270px;
}
...
}
這是一種使用jQuery/javascript的方法。 「.colElement」是您想要影響的每個.span *元素。只需調整窗口寬度斷點以滿足您的需求。
基於Twitter的引導2 *
function arrangeColumns(tile, numColsLG, numColsMED, numColsSM){
$(tile).removeClass('first');
var colSize = 0;
var windowWidth = $(window).width();
switch(numColsLG) {
case 2: colSizeLG = 6; break;
case 3: colSizeLG = 4; break;
case 4: colSizeLG = 3; break;
case 5: colSizeLG = 3; break;
case 6: colSizeLG = 2; break;
}
switch(numColsMED) {
case 2: colSizeMED = 6; break;
case 3: colSizeMED = 4; break;
case 4: colSizeMED = 3; break;
case 5: colSizeMED = 3; break;
case 6: colSizeMED = 2; break;
}
switch(numColsSM) {
case 2: colSizeSM = 6; break;
case 3: colSizeSM = 4; break;
case 4: colSizeSM = 3; break;
case 5: colSizeSM = 3; break;
case 6: colSizeSM = 2; break;
}
if(windowWidth > 1200){
$(tile).removeClass('span' + colSizeMED + " " + 'span' + colSizeSM);
$(tile).addClass('span' + colSizeLG);
$(tile + ':nth-child('+numColsLG+'n+1)').addClass('first');
} else if(windowWidth < 1200 && windowWidth > 900) {
$(tile).removeClass('span' + colSizeLG + " " + 'span' + colSizeSM);
$(tile).addClass('span' + colSizeMED);
$(tile + ':nth-child('+numColsMED+'n+1)').addClass('first');
} else {
$(tile).removeClass('span' + colSizeLG + " " + 'span' + colSizeMED);
$(tile).addClass('span' + colSizeSM);
$(tile + ':nth-child('+numColsSM+'n+1)').addClass('first');
}
}
/* Initialize */
arrangeColumns('.colElement', 3, 2, 2);
/* Call on window resize */
$(window).resize(function() {
arrangeColumns('.colElement', 3, 2, 2);
});
最近,我需要爲我的原型。我可以想到三種骯髒的解決方案,但它們都不是非常完美,並且足以讓我在生產代碼中實施。但是,如果你需要它來做簡單的靜態網站或者使用原型來演示某些東西,那麼它們都可以正常工作
編碼兩種情況。一個4列,另一個3列。隱藏/顯示需要@media查詢。 (使用bootstrap的實用程序類)。
類似號碼1但不那麼凌亂。而不是編寫兩個不同的場景 - 動態更改HTML標記。放一個簡單的JS/Jquery腳本,它將刪除一些類並在特定寬度上添加新的類。你可能需要銷燬一些[div class =「row」],並且隨時創建新的實現一行中不同數量的項目。
忽略此部分的網格(如果可以)並硬編碼您的項目。您可以修復它們的寬度,以便在沒有足夠的空間時,它們將開始闖入新行,或者只使用百分比和使用@media查詢來硬編碼特定寬度。您始終可以使用所有列,並將硬編碼的項目放在一行中(例如,使用全部12列作爲容器)。
獎金 - 使用同位素(http://mpezzi.github.io/bootstrap_isotope/)或Mansonry http://masonry.desandro.com/來達到您的效果。
這將是很好的sooo有過,我想有多少在特定斷點一行條款顯示控制,但這將需要重新考慮引導......也許他們會弄清楚,並添加作爲附加或什麼...目前我甚至不能想到這可以如何與引導默認類...
我知道你問Bootsrap但Zurb基金會有這樣的功能,像這個內置的
<div class="row">
<div class="small-4 medium-6 large-12 columns">
</div>
<div class="small-8 medium-6 columns">
</div>
</div>
會做什麼是創建2列4和8 f或小型設備或2列6中型設備和1全寬12列大屏幕。如果你想在屏幕尺寸上保持相同的佈局,只需很小的*列,並且它將用於大中型媒體查詢
對不起 - 我誤解了我的問題。爲了清晰起見而更新。 – JakeP 2013-03-21 19:02:27
那麼在一定程度上,這同樣適用。我已經稍微更新了我的答案。您可能想看看Bootstrap的[響應式設計](http://twitter.github.com/bootstrap/scaffolding.html#responsive)部分。 – 2013-03-21 19:05:04
謝謝詹姆斯。我看到如何改變我擁有的四個span3的寬度,但是如何才能連續顯示三個或兩個span3而不是四個?我無法在文檔中找到類似的內容。 – JakeP 2013-03-21 19:11:31