用于折叠 Bootstrap 侧边栏的按钮，在宽屏幕上答案

【问题标题】：Button for Collapsing a Bootstrap SideBar, on wide screens用于折叠 Bootstrap 侧边栏的按钮，在宽屏幕上
【发布时间】：2017-06-27 11:19:31
【问题描述】：

我正在使用这个模板：

https://bootsnipp.com/snippets/eNe4v

问题是我希望我的侧边栏变小或隐藏，通过点击一个按钮，在 22 英寸的电脑屏幕上。

我尝试了一些没有成功的事情。

我正在使用 AngularJS，但也许应该有 Jquery 的解决方案？

当栏被隐藏时，屏幕必须变大，就像在这个模板中一样：

https://github.com/rdash/rdash-angular

但我不能使用这个，因为我不使用 Gulp。

谢谢你，如果你有任何想法，祝你有美好的一天。

当我使用 JQUERY 隐藏 SIDEBAR DIV 时，我只有一个空白区域，但其他 div 不会自动调整大小以适应所有宽屏幕：

【问题讨论】：

为侧边栏的 div 提供 id，然后在按钮单击时调用一个函数，该函数将通过 id 隐藏 div 示例：$( "#id" ).hide();
谢谢，我试过了，但是屏幕并没有调整所有引导元素的大小，有一个空格而不是侧边栏。
在这种情况下，您必须从该 id 中删除 col 类并将 col-something-12 添加到要扩展的 div 中。

标签： jquery css angularjs twitter-bootstrap

【解决方案1】：

你可以通过一个简单的 JS 函数来实现这一点

这是Example

$('#button').click(function () {
        $("#myDiv").animate({width:'toggle'},300); //300 is the speed (in ms)
    });

【讨论】：

【解决方案2】：

这是我在评论中提到的一个例子。单击按钮时，jquery 将从侧边栏中删除列的类，然后隐藏侧边栏，并从内容（即主要信息）中删除该类，并为其提供 12 列的类。

这是Example

html

 <div class="container">
<div id="sidebar" class="col-sm-3">sidebar content</div>
<div id="content" class="col-sm-9"> <button type="button" onclick="myfunction()">hide the sidebar </button> </div> 
</div>

jquery

function myfunction(){
$("#sidebar").removeClass("col-sm-3");
$("#sidebar").hide();
$("#content").removeClass("col-sm-9");
$("#content").addClass("col-sm-12");
}

【讨论】：