制作Twitter自举全宽？

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/