3

我正在使用 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 来实现这个效果呢？

4

2 回答 2

7

=用一点 jQuery 很容易做到。

添加和 id 到您的 div，并在准备好和调整大小时添加/删除跨度类和 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/

于 2012-06-15T15:13:01.500 回答
0

我也一直在为此苦苦挣扎。您可以使用列跨度来模拟这一点。对于 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); 
}
于 2014-05-06T17:14:25.530 回答