Twitter Bootstrap（响应式）- 特定最小宽度后的附加列答案

【问题标题】：Twitter Bootstrap (Responsive) - Additional Column After Certain Min WidthTwitter Bootstrap（响应式）- 特定最小宽度后的附加列
【发布时间】：2012-06-18 15:46:01
【问题描述】：

我正在使用 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>

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

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

【问题讨论】：

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

=用一点 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/

【讨论】：

很棒的洗礼！谢谢你这么棒的回答，就像一个魅力。

【解决方案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); 
}

【讨论】：