适用于 Bootstrap 3.0.3 但不适用于 3.3.7 的可折叠侧边栏答案

【问题标题】：Collapsible Sidebar working on Bootstrap 3.0.3 but not 3.3.7适用于 Bootstrap 3.0.3 但不适用于 3.3.7 的可折叠侧边栏
【发布时间】：2018-06-28 09:19:23
【问题描述】：

我正在尝试在 Bootstrap 3.3.7 中实现https://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle 上显示的内容

以上是在 Bootstrap 3.0.3 中编写的。当我在本地机器上使用 3.0.3 时，它的工作原理与上面链接中呈现的完全一样。但是，当我切换到 3.3.7（在我想要此菜单的项目中使用它）时，它不会。

我正在尝试找出导致此问题的 3.0.3 和 3.3.7 之间的不同之处。我可以在 Bootstrap 附带的 CSS 中看到的唯一类是 .row：

.row {
    margin-left:0px;
    margin-right:0px;
}

当我将其注释掉时，无论如何都没有区别。 CSS 中的其他声明似乎不是 Bootstrap，所以不知道为什么更改版本会这样做。

我浏览了部分 CSS 并尝试注释掉或更改值，但我无法弄清楚这一点。特别是涉及(-)150px 和70px 的任何内容，因为这似乎是在控制宽度和位置。

它的渲染方式是这样的（菜单打开）：

然后当菜单关闭时 - 消失在浏览器的左边缘之外。

我想实现一个可折叠的左侧边栏，其中可以看到用于切换它的按钮，就像上面的链接一样。我找不到任何针对 Bootstrap 3.3.7 的教程可以做到这一点 - 尽管它在许多网站上似乎是一个非常常见的功能。

请有人帮我完成这项工作，或建议与 3.3.7 兼容的替代方案吗？

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我希望这会有所帮助。我已将 jQuery 更新为 jquery-3.3.1.min.js，为了正确显示图标，我将 padding-right 从 65px 更改为 30px。

$("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("active");
});

.row {
	margin-left: 0px;
	margin-right: 0px;
}
#wrapper {
	padding-left: 70px;
	transition: all .4s ease 0s;
	height: 100%
}
#sidebar-wrapper {
	margin-left: -150px;
	left: 70px;
	width: 150px;
	background: #222;
	position: fixed;
	height: 100%;
	z-index: 10000;
	transition: all .4s ease 0s;
}
.sidebar-nav {
	display: block;
	float: left;
	width: 150px;
	list-style: none;
	margin: 0;
	padding: 0;
}
#page-content-wrapper {
	padding-left: 0;
	margin-left: 0;
	width: 100%;
	height: auto;
}
#wrapper.active {
	padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
	left: 150px;
}
#page-content-wrapper {
	width: 100%;
}
#sidebar_menu li a, .sidebar-nav li a {
	color: #999;
	display: block;
	float: left;
	text-decoration: none;
	width: 150px;
	background: #252525;
	border-top: 1px solid #373737;
	border-bottom: 1px solid #1A1A1A;
	-webkit-transition: background .5s;
	-moz-transition: background .5s;
	-o-transition: background .5s;
	-ms-transition: background .5s;
	transition: background .5s;
}
.sidebar_name {
	padding-top: 25px;
	color: #fff;
	opacity: .7;
}
.sidebar-nav li {
	line-height: 40px;
	text-indent: 20px;
}
.sidebar-nav li a {
	color: #999999;
	display: block;
	text-decoration: none;
}
.sidebar-nav li a:hover {
	color: #fff;
	background: rgba(255,255,255,0.2);
	text-decoration: none;
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
	text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
	height: 65px;
	line-height: 60px;
	font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
	color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
	color: #fff;
	background: none;
}
#main_icon {
	float: right;
	padding-right: 30px;
	padding-top: 20px;
}
.sub_icon {
	float: right;
	padding-right: 30px;
	padding-top: 10px;
}
.content-header {
	height: 65px;
	line-height: 65px;
}
.content-header h1 {
	margin: 0;
	margin-left: 20px;
	line-height: 65px;
	display: inline-block;
}

@media (max-width:767px) {
#wrapper {
	padding-left: 70px;
	transition: all .4s ease 0s;
}
#sidebar-wrapper {
	left: 70px;
}
#wrapper.active {
	padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
	left: 150px;
	width: 150px;
	transition: all .4s ease 0s;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



<body>
<div id="wrapper" class="active"> 
  
  <!-- Sidebar --> 
  <!-- Sidebar -->
  <div id="sidebar-wrapper">
    <ul id="sidebar_menu" class="sidebar-nav">
      <li class="sidebar-brand"><a id="menu-toggle" href="#">Menu<span id="main_icon" class="glyphicon glyphicon-align-justify"></span></a></li>
    </ul>
    <ul class="sidebar-nav" id="sidebar">
      <li><a>Link1<span class="sub_icon glyphicon glyphicon-link"></span></a></li>
      <li><a>link2<span class="sub_icon glyphicon glyphicon-link"></span></a></li>
    </ul>
  </div>
  
  <!-- Page content -->
  <div id="page-content-wrapper"> 
    <!-- Keep all page content within the page-content inset div! -->
    <div class="page-content inset">
      <div class="row">
        <div class="col-md-12">
          <p class="well lead">An Experiment using the sidebar template from startbootstrap.com which I integrated in my website (<a href="http://animeshmanglik.name">animeshmanglik.name</a>)</p>
          <p class="well lead">Click on the Menu to Toggle Sidebar . Hope you enjoy it!</p>
        </div>
      </div>
    </div>
  </div>
</div>
</body>

【讨论】：