为我们现有的产品设计新的网页布局。我们希望集成的团队聊天和活动提要显示始终显示在每个页面的右侧。我们正在使用 Bootstrap 3，我有一个看起来不错的模拟。我正在使用 vanilla Bootstrap 12 列大小调整样式来执行此操作：
现在我们希望允许用户折叠右侧面板（水平），尤其是对于水平空间很重要的视图（网格视图等）。
有没有引导方法来做到这一点？我可以使用垂直拆分器小部件，或顶部导航中的切换按钮，或任何其他有意义的演示。我需要更多关于网格大小的建议。
【问题讨论】：
标签： jquery html css twitter-bootstrap-3
我刚刚完成了我认为您想要的 jquery 添加和删除引导类。我有一个 ID 为 collapse 的按钮，单击它会检查侧边栏是否打开并更改布局。
标记：
<div class="container">
<div class="row">
<div class="row">
<div class="col-md-12"><button class="btn-primary btn-large btn" id="collapse">Collapse sidebar</button></div>
</div>
<div class="row">
<div class="col-md-8" id="content" style="height:400px;border:2px solid black">Hello, I'm a 3/4 width Div.</div>
<div class="col-md-4 open" id="sidebar" style="height:400px;border:2px solid blue">Hey There, I'm a 1/4 width Div</div>
</div>
</div>
</div>
jQuery：
$('#collapse').click(function(){
if($('#sidebar').hasClass('open'))
{
$('#sidebar').removeClass('col-md-4');
$('#sidebar').removeClass('open');
$('#sidebar').addClass('hidden');
$('#content').addClass('col-md-12');
$('#content').removeClass('col-md-8');
}
else
{
$('#sidebar').addClass('col-md-4');
$('#sidebar').addClass('open');
$('#sidebar').removeClass('hidden');
$('#content').removeClass('col-md-12');
$('#content').addClass('col-md-8');
}
});
我唯一拥有的 css 是一个隐藏类 .hidden{display:none;} 和 fiddle.，由于窗口很小，我在小提琴中使用了 xs。但工作原理相同。
【讨论】：
我在 2 个项目中使用了布局插件，这对我帮助很大，它可以让您完全控制。我的情况也需要左右和底部。链接是，
我也使用 bootstrap3 并且在使用 bootstrap 模块时要明智，让 shur 在 body 标记后立即放置该代码
编码愉快。
【讨论】：
我需要一种类似的方法来处理我们的一个项目，全屏视图是here。
我稍微修改了脚本和布局以获得您想要实现的目标。 here 是代码，全屏是 here。即使在页面刷新后，我也使用 jquery cookie 来保留视图状态。单击 Cog 图标 将切换侧边栏。脚本是：
$(function () {
var $menu = $('#sidebar-wrapper');
var $content = $('#main-wrapper');
if ($.cookie('offcanvas') == 'hide') {
$content.addClass('no-transition');
$menu.hide();
$menu.css('right', -($menu.outerWidth() + 10));
$content.removeClass('col-md-10').addClass('col-md-12');
}
else if ($.cookie('offcanvas') == 'show') {
$menu.show(500).animate({ right: 0 });
// $menu.show();
$content.removeClass('no-transition');
$content.removeClass('col-md-12').addClass('col-md-10');
}
$('.toggle-button').click(function () {
$content.removeClass('no-transition');
if ($menu.is(':visible') && $content.hasClass('col-md-10')) {
// Slide out
$menu.animate({
right: -($menu.outerWidth() + 10)
}, function () {
$menu.hide(1000);
});
$content.removeClass('col-md-10').addClass('col-md-12');
$.cookie('offcanvas', 'hide');
}
else {
// Slide in
$menu.show(500).animate({ right: 0 });
$content.removeClass('col-md-12').addClass('col-md-10');
$.cookie('offcanvas', 'show');
}
if ($content.hasClass('col-md-12') && $menu.is(':hidden')) {
$menu.animate({
right: 0
}, function () {
$menu.show(1000);
});
// $menu.show();
$content.removeClass('no-transition');
$content.removeClass('col-md-12').addClass('col-md-10');
}
});
$('.bs-tooltip').tooltip();
});
您可以自定义布局/css 以获得您想要的内容。
【讨论】：