个人中心
gpt4 book ai didi

html - 在 Bootstrap 3.0.3 但不是 3.3.7 上工作的可折叠边栏

转载 作者：太空宇宙 更新时间：2023-11-04 07:12:01 26 4
gpt4 key购买 nike

我正在尝试实现 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 之间的不同之处。我在 Bootstrap 附带的 CSS 中可以看到的唯一类是 .row:

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

当我将其注释掉时，无论如何都没有区别。 CSS 中的其他声明似乎是非 Bootstrap，因此不确定为什么更改版本会发生这种情况。

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

它呈现的方式是这样的(菜单打开):

enter image description here

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

enter image description here

我想实现一个可折叠的左侧边栏，其中切换它的按钮是可见的，就像上面的链接一样。我找不到 Bootstrap 3.3.7 的任何教程来执行此操作 - 尽管它在许多网站上似乎是一个非常常见的功能。

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

最佳答案

希望对您有所帮助。我已将 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>

关于html - 在 Bootstrap 3.0.3 但不是 3.3.7 上工作的可折叠边栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51079108/

26 4 0
文章推荐： c++ - 堆栈粉碎/回溯
文章推荐： python 和泡沫 "ImportError: cannot import name getLogger"
文章推荐： c - mpi 文件读取未结束
文章推荐： java - 如何在JXBrowser 4.1中使用网络摄像头界面
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com