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

=使用一些jQuery很容易.

添加和id到你的div并添加/删除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/