Складная боковая панель, работающая на Bootstrap 3.0.3, но не 3.3.7

Question

Я пытаюсь реализовать то, что показано на https://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle в Bootstrap 3.3.7

Выше написано в Bootstrap 3.0.3. Когда я использую 3.0.3 на своем локальном компьютере, он работает точно так же, как показано на приведенной выше ссылке. Однако, когда я переключаюсь на 3.3.7 (который используется в проекте, где я хочу это меню), это не так.

Я пытаюсь выяснить, что отличается между 3.0.3 и 3.3.7, что могло бы вызвать это. Единственный класс, который я вижу в CSS, который поставляется с Bootstrap, это .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, и для правильного отображения значков я изменил отступ справа от 65 до 30 пикселей.

$("#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>