这是我的标记,使用 Twitter Bootstrap 流体布局进行编码
<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>
我想在普通的less文件中定义一个新类为.row-colum {.span4;}并使用媒体查询方向:纵向覆盖.row-column {.span2;}。但我得到的编译错误越来越少。
这就是我想做的
<div class="row-fluid">
<div class="row-column">Col2</div>
<div class="span10">Col10</div>
</div>
有什么办法可以实现这个目标吗?
最佳答案
如果您不能/不想让它与 LESS 一起工作,您可以随时回退到寻找调整大小事件:
$(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");
}
});
关于twitter-bootstrap - Bootstrap 响应式网格布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12826335/