jquery – 可折叠的侧边栏,带有流体twitter引导

我正在寻找一个CSS解决方案来创建一个按钮，使用twitter引导来打开和关闭侧边栏。

我想要他们的网页上的一个小图标之一，当侧边栏关闭时，它们的网页看起来像一个拉片，然后在侧边栏拉出时，它们是否有名称？

我创建了一个toggleSidebar图标链接来执行此操作，但我有两个问题：

>我无法使用float：left或display：inline-block将其浮动
>修复，它创建一个它自己的列…我想要它浮动在主要内容之上。

html：

<div class="container-fluid">
  <div class="row-fluid">
    <div id="sidebar" class="span3 scrollDiv" style="display: none;">
      <!--Sidebar content-->
    </div>
    <div id="content" class="span12">
      <!--Main content-->
    </div>
    <a id="toggleSidebar" href="#" class="toggles"><i class="icon-chevron-right"></i></a>
  </div>
</div>

css：

#toggleSidebar {
  /* float: left; */
  /* display:inline-block; */
  position:fixed;
  display:block;
  left:0;
  top:45px;
  color:#779DD7;
  padding:2px 4px;
}

javascript：

function sidebar(panels) {
  if (panels === 1) {
    $('#content').removeClass('span9');
    $('#content').addClass('span12 no-sidebar');
    $('#sidebar').hide();
  } else if (panels === 2) {
    $('#content').removeClass('span12 no-sidebar');
    $('#content').addClass('span9');
    $('#sidebar').show();
  }
}

$('#toggleSidebar').click(function() {
  if ($.asm.panels === 1) {
    $('#toggleSidebar i').addClass('icon-chevron-left');
    $('#toggleSidebar i').removeClass('icon-chevron-right');
    return sidebar(2);
  } else {
    $('#toggleSidebar i').removeClass('icon-chevron-left');
    $('#toggleSidebar i').addClass('icon-chevron-right');
    return sidebar(1);
  }
})

一个工作的例子：http://jsfiddle.net/amorris/dmyTR/

对于我的生活，我在网络上找不到一个例子 – 但是，这是一个快速绘制我所追求的内容：

这有点像@ http://simplerealtytheme.com/plugins/pullout-widgets/的效果 – 看起来他们正在使用display：block;清楚：两者;然后将拉片绝对放置在具有负右位置的div内。

解决方法

我想这就是你想要的，见 here。

相关代码是：

#content {
    float:left;
}

#mapCanvas img {
    max-width: none;
}

#maincont{
    margin-top: 42px;
}

#toggleSidebar {
    float:left;
    color:#779DD7;
    padding:2px 4px;
}

#sidebar{
    float:left;   
}

请确认这是你的想法！