Question

我正在尝试实现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兼容的替代方法吗？

Answer 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>

在Bootstrap 3.0.3上可折叠的侧边栏，但在3.3.7上不起作用

1 个答案: