自定義引導程序 - 如何更改一定寬度下的列數？

我開始定製我的引導，至今我都非常相似，下面的模板的內容：自定義引導程序 - 如何更改一定寬度下的列數？

http://twitter.github.com/bootstrap/examples/fluid.html

，而不是有三個span4s但是，我有四個span3s。一旦瀏覽器達到一定的寬度，我想有三個span3s。然後，在另一個寬度上，兩個span3s。

有沒有辦法用直css來做到這一點？

2013-03-21 JakeP

您可以簡單地將.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; 
    } 
    ... 
}

來源

2013-03-21 18:59:42

對不起 - 我誤解了我的問題。爲了清晰起見而更新。 – 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

這是一種使用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); 
});

來源

2013-10-06 15:00:21 wOOge

最近，我需要爲我的原型。我可以想到三種骯髒的解決方案，但它們都不是非常完美，並且足以讓我在生產代碼中實施。但是，如果你需要它來做簡單的靜態網站或者使用原型來演示某些東西，那麼它們都可以正常工作

編碼兩種情況。一個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有過，我想有多少在特定斷點一行條款顯示控制，但這將需要重新考慮引導......也許他們會弄清楚，並添加作爲附加或什麼...目前我甚至不能想到這可以如何與引導默認類...

來源

2014-01-14 16:58:01 user3194874

我知道你問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列大屏幕。如果你想在屏幕尺寸上保持相同的佈局，只需很小的*列，並且它將用於大中型媒體查詢

來源

2015-10-27 00:57:43 Alex

自定義引導程序 - 如何更改一定寬度下的列數？

回答

相關問題