首页 文章

Bootstrap响应式网格布局

提问于
浏览 次
2

这是我的标记，使用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>

我想在正常的文件中使用.row-colum 并使用媒体查询方向定义一个新类：portrait overwrite .row-column . 但我得到的编译错误较少 .

这就是我的想法

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

有什么办法可以实现这个目标吗？

twitter-bootstrap grid-layout

1 回答

  • 2

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

相关问题