制作 twitter bootstrap 全角？答案

【问题标题】：Making twitter bootstrap full-width?制作 twitter bootstrap 全角？
【发布时间】：2012-06-27 20:41:56
【问题描述】：

我正在尝试创建一个响应迅速且具有右侧边栏的简单网站。

我希望右侧边栏在移动设备上堆叠在顶部。

这是我的代码：http://jsfiddle.net/wyLTA/embedded/result/

我需要进行哪些更改才能使其全宽且不会卡在左侧？

【问题讨论】：

顺便说一句：这是使用需要'span3'或类似的网格系统的地方。在您的“移动”布局中，您显然不希望它是 3 列（并且在较大的宽度下您可能希望它小于 3），因此像这样的类名很快就会变得混乱。我建议寻找不这样做的网格系统，例如 Susy（用于 Compass）。

标签： html css twitter-bootstrap responsive-design sidebar

【解决方案1】：

在您的 .span6 和以下 css / jQuery 之前添加 <div class="span3" id="sidebar"> ... </div>。

HTML：

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span3" id="sidebar">sidebar</div>
    <div class="span6">
      <div class="hero-unit">
        ...

CSS：

#sidebar{
  background-color:#555555;
  position:absolute;
  right:0px;
  margin-bottom:9px;
}

jQuery：

function sidebar() {
  var windowwidth=$(window).width();
  if(windowwidth>=768) $("#sidebar").css('position','absolute')
  else $("#sidebar").css('position','relative')
}
$(document).ready(sidebar);
$(window).resize(sidebar);

http://jsfiddle.net/baptme/wyLTA/8/

或者使用媒体查询

CSS：

#sidebar{
  background-color:#555555;
  right:0px; 
  margin-bottom:9px;
} 

@media (max-width: 767px) {
  #sidebar{
    position:relative;       
  }
}

@media (min-width: 768px) {
  #sidebar{
    position:absolute;
  }
}

http://jsfiddle.net/wyLTA/11/

【讨论】：

谢谢，这行得通，但有没有办法在没有 JavaScript 的情况下做到这一点？
毕竟使用媒体查询更容易。（更新答案）

【解决方案2】：

刚刚想通了，从 span6 移动到 span9 就成功了。

代码：http://jsfiddle.net/wyLTA/9/embedded/result/

[虽然仍然想知道如何让侧边栏堆叠到顶部而不是底部]

【讨论】：

您需要调整边距，但如果您在标记中交换内容和侧边栏的位置，然后应用 pull-left 和 pull-right 类，您可以让侧边栏出现在最佳。不过，您需要调整一些边距：jsfiddle.net/wyLTA/32/embedded/result