html - 制作 twitter bootstrap 全角？

Question

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

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

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

我需要改变什么才能使其全宽，而不是卡在左边？

Answer 1

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

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

Answer 2

只是想通了，从span6到span9做的伎俩。

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

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