html - Twitter Bootstrap(响应式)- 特定最小宽度后的附加列

Question

我正在使用 Twitter Bootstrap 并使用带有媒体查询的流畅设计使其成为响应式设计。

到目前为止，我的设计工作是“响应式”示例 2 列布局。但是，我需要做的是在 1200px min-width 之后添加一个额外的侧边栏列。

所以如果我的 1024 布局有:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span8">
              .....
        </div>
        <div class="span4 last">
              ..sidebar junk..
        </div>
    </div>
</div>

我需要 1200px 版本才能有效地像这样:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span6">
              .....
        </div>
        <div class="span3">
              ..sidebar junk..
        </div>
        <div class="span3 last">
              ..sidebar 2 junk..
        </div>

    </div>
</div> 

或者类似的东西。然后当用户缩小到 1200px 以下时，删除第二个 span3 并再次使第一个 span3 成为 span4。参见 http://www.smashingmagazine.com/对于我所问的一个非常复杂的版本。当您提高屏幕分辨率时，会为内容添加侧边栏。

我们如何使用 Bootstrap 实现这种效果？

Answer 1

=Quite easy to do with a bit of jQuery.

在您的 div 中添加和 id，并在准备就绪和调整大小时添加/删除 span 类和 css。

<div class="container-fluid">
  <div class="row-fluid">
    <div id="one">
      .....
    </div>
    <div id="two">
      ..sidebar junk..
    </div>
    <div class="span3" id="three">
      ..sidebar 2 junk..
    </div>
  </div>
</div>

&

function sizing() {
  var windowwidth=$(window).width();
  if(windowwidth>=1200){
    $('#one').removeClass('span8').addClass('span6');
    $('#two').removeClass('span4').addClass('span3');
    $('#three').css('display','inline');
  } else {
    $('#one').removeClass('span6').addClass('span8');
    $('#two').removeClass('span3').addClass('span4');
    $('#three').css('display','none');
  }          
}
$(document).ready(sizing);
$(window).resize(sizing);

http://jsfiddle.net/baptme/9MYTZ/4/