我正在寻找一个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内。
