引導響應網格佈局

Question

這是我的標記，其是使用Twitter的引導流體佈局

<div class="row-fluid"> 
    <div class="span4">Col4</div> 
    <div class="span8">Col8</div> 
</div> 

這是工作在橫向模式精細編碼。但在肖像中，我想改變網格;例如第一個div應占用2列，第二個div應占用10列。

<div class="row-fluid"> 
    <div class="span2">Col2</div> 
    <div class="span10">Col10</div> 
</div> 

我想定義一個新的類作爲.row - 科拉姆的{.span4;}在偏少文件，並使用媒體查詢方向：縱向覆蓋.row列{.span2;}。但我得到更少的編譯錯誤。

這就是我想這樣做

<div class="row-fluid"> 
    <div class="row-column">Col2</div> 
    <div class="span10">Col10</div> 
</div> 

的有什麼辦法，我可以做到這一點？

Answer 1

如果你不能/不想要得到它用更少的工作，你總是可以回退到尋找調整大小事件：

$(window).resize(function() { 
    if ($(window).width() < 640) { 
     $("#col1").removeClass("span4").addClass("span2"); 
     $("#col2").removeClass("span8").addClass("span10"); 
    } else { 
     $("#col1").removeClass("span2").addClass("span4"); 
     $("#col2").removeClass("span10").addClass("span8"); 
    } 
});