引导响应网格布局

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"); 
    } 
});