Twitter Bootstrap（響應） - 某些最小寬度後的附加列

Question

我正在使用Twitter Bootstrap並使用流媒體設計和媒體查詢使其成爲響應式設計。

到目前爲止，我的設計工作是對示例2列布局進行「反應」。但是，我需要做的是在1200px最小寬度後添加一個附加的側欄。

所以，如果我的1024佈局有：

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span8"> 
       ..... 
     </div> 
     <div class="span4 last"> 
       ..sidebar junk.. 
     </div> 
    </div> 
</div> 

我將需要1200像素版本，有效地是這樣的：

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span6"> 
       ..... 
     </div> 
     <div class="span3"> 
       ..sidebar junk.. 
     </div> 
     <div class="span3 last"> 
       ..sidebar 2 junk.. 
     </div> 

    </div> 
</div> 

或者其他類似的效果。然後，當用戶縮小到1200px以下時，請刪除第二個span3，並再次將第一個span3作爲span4。請參閱http://www.smashingmagazine.com/瞭解我所問的非常複雜的版本。在增加屏幕分辨率時，會爲內容添加邊欄。

我們如何用Bootstrap實現這種效果？

Answer 1

=很容易做一點jQuery。

添加和id到你的div和添加/刪除span類和css準備好和調整大小。

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div id="one"> 
     ..... 
    </div> 
    <div id="two"> 
     ..sidebar junk.. 
    </div> 
    <div class="span3" id="three"> 
     ..sidebar 2 junk.. 
    </div> 
    </div> 
</div> 

&

function sizing() { 
    var windowwidth=$(window).width(); 
    if(windowwidth>=1200){ 
    $('#one').removeClass('span8').addClass('span6'); 
    $('#two').removeClass('span4').addClass('span3'); 
    $('#three').css('display','inline'); 
    } else { 
    $('#one').removeClass('span6').addClass('span8'); 
    $('#two').removeClass('span3').addClass('span4'); 
    $('#three').css('display','none'); 
    }   
} 
$(document).ready(sizing); 
$(window).resize(sizing); 

http://jsfiddle.net/baptme/9MYTZ/4/

Answer 2

我一直在掙扎機智這一點。您可以使用列跨度來模擬這一點。對於3列，將跨度設置爲4（12/4 = 3），對於4列設置爲3.

您可以獲得更大的粒度，並有更多的列數，例如24而不是12。在多種屏幕尺寸小和大列：

@grid-columns: 24; 

.small-column { 
    .make-xs-column(12); // 2 small columns at xs size (24/2) 
    .make-sm-column(6); // 4 small columns at sm size (24/6) 
    .make-md-column(4); // 6 small columns at md size (24/4) 
    .make-lg-column(3); // 8 small columns at lg size (24/4) 
} 

.large-column { 
    .make-xs-column(24); 
    .make-sm-column(12); 
    .make-md-column(8); 
    .make-lg-column(6); 
}