twitter-bootstrap - Bootstrap 响应式网格布局

Question

这是我使用 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;} 并使用媒体查询方向：portrait overwrite .row-column {.span2;}。但是我的编译错误越来越少。

这就是我想做的

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

有什么方法可以实现吗？

Answer 1

如果您不能/不想让它与 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");
    }
});