Question

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

我希望右侧边栏能够叠加在移动设备的顶部。

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

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

Answer 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/

Answer 2

刚想通了，从span6移到span9就行了。

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

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

制作Twitter自举全宽？

2 个答案: