Bootstrap responsive grid layout

This is my Markup which is coded using twitter bootstrap fluid layout

<div class="row-fluid">
  <div class="span4">Col4</div>
  <div class="span8">Col8</div>
</div>

This is working fine in Landscape mode. But in portrait i want to change the grid; eg the first div should occupy 2 columns and the second div should occupy 10 columns.

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

I thought of defining a new class as .row-colum {.span4;} in normal less file and using media query orientation:portrait overwrite .row-column {.span2;}. But i am getting less compilation error.

This is what i thought of doing

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

Is there any way which i can achieve this?

---

如果你不能/不想让它与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/15520.html

上一篇: 引导

下一篇: Bootstrap响应式网格布局