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很容易。

添加并识别你的div并添加/删除span类和css on ready并调整大小。

<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/

Answer 2

我也一直在为此而苦苦挣扎。您可以使用列跨度来模拟此操作。对于3列，将跨度设置为4（12/4 = 3），将4列设置为3。

您可以使用更大的总列数（例如24而不是12）获得更多粒度。请参阅下面的示例，其中包含多个屏幕尺寸的小列和大列的样式：

@grid-columns: 24; 

.small-column {
    .make-xs-column(12); // 2 small columns at xs size (24/2)
    .make-sm-column(6);  // 4 small columns at sm size (24/6)
    .make-md-column(4);  // 6 small columns at md size (24/4)
    .make-lg-column(3);  // 8 small columns at lg size (24/4)
}

.large-column {
    .make-xs-column(24);
    .make-sm-column(12);
    .make-md-column(8);
    .make-lg-column(6); 
}

Twitter Bootstrap（响应） - 一定最小宽度后的附加列

2 个答案: