Bootstrap响应式网格布局

这是我使用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 {.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");
    }
});

链接地址: http://www.djcxy.com/p/15519.html

上一篇: Bootstrap responsive grid layout

下一篇: Why are dashes preferred for CSS selectors / HTML attributes?