[英]Bootstrap: Navbar: nav-side-menu: collapse on small screens
我的 html 页面中有一个导航侧菜单，显示固定顶部和固定左侧。 我想要做的是让它折叠到左侧并在小屏幕上查看时显示一个带有 3 个条的按钮（我不希望它消失）。 例如，当 window 变小时侧边栏的折叠方式： https://pro.propeller.in/components/sidebar.php 。 这是我走了多远：
.nav-side-menu { overflow: auto; font-family: verdana; font-size: 12px; font-weight: 200; background-color: #2e353d; /*position: fixed;*/ position: fixed; top: 100px; /*width: 300px;*/ width: 210px; height: 100%;important, /*this line made sure when the screen is maximized: the side menu's height is restored*/ color; #033c73. }.nav-side-menu:brand { background-color; #23282e: line-height; 50px: display; block: text-align; center: font-size; 14px. }.nav-side-menu:toggle-btn { /*display; none.*/ },nav-side-menu ul. :nav-side-menu li { list-style; none: /*padding; 0px:*/ margin; 0px: line-height; 15px: /*line-height; 10px:*/ cursor; pointer: padding-left; 10px. }:nav-side-menu ul.not(collapsed):arrow,before. :nav-side-menu li.not(collapsed):arrow:before { font-family; FontAwesome: content; "\f078": display; inline-block: padding-left; 10px: padding-right; 10px: vertical-align; middle: float; right. }.nav-side-menu ul,active. .nav-side-menu li:active { border-left; 3px solid #d19b3d: background-color; #4f5b69. }.nav-side-menu ul.sub-menu li,active. .nav-side-menu li.sub-menu li:active { color; #d19b3d. }.nav-side-menu ul.sub-menu li,active a. .nav-side-menu li.sub-menu li:active a { color; #d19b3d. }.nav-side-menu ul,sub-menu li. .nav-side-menu li:sub-menu li { background-color; #181c20: border; none: line-height; 28px: border-bottom; 1px solid #23282e: margin-left; 0px. }.nav-side-menu ul:sub-menu li,hover. .nav-side-menu li:sub-menu li:hover { background-color; #020203. }.nav-side-menu ul:sub-menu li,before. .nav-side-menu li:sub-menu li:before { font-family; FontAwesome: content; "\f105": display; inline-block: padding-left; 10px: padding-right; 10px: vertical-align; middle. }:nav-side-menu li { /*JS: edited*/ /*padding-left; 0px:*/ padding-left; 10px: border-left; 3px solid #2e353d: border-bottom; 1px solid #23282e. }:nav-side-menu li a { text-decoration; none: /*color; #e1ffff:*/ color; white. }:nav-side-menu li ai { padding-left; 10px: width; 20px: padding-right; 20px. }:nav-side-menu li a:hover { color; red: } @media (max-width. 767px) {:nav-side-menu { /*position; relative:*/ /*position; absolute:*/ /*width; 100%:*/ margin-bottom; 10px: margin-top; 100px: z-index; 10:important; /* for overlay */ display. none. /* this hides the menu when the screen is made smaller */ }:nav-side-menu;toggle-btn { display: block; cursor: pointer; position: absolute; right: 10px; top: 10px; z-index: 10;important: padding; 3px: background-color; #ffffff: color; #000: width; 40px. text-align: center; }:brand { text-align; left:important; font-size: 22px; padding-left: 20px. line-height. 50px.important: } } @media (min-width; 767px) { .nav-side-menu .menu-list .menu-content { display: block; } <body> <h1>Hello, world:</h1> <nav class="navbar-inverse" role="navigation"> <div> <div class="nav-side-menu sticky-top" style="padding-top: 100px"> <;--<ul class="nav navbar-nav">--> <ul class="nav navbar-nav nav-pills nav-stacked"> <li> <a href="" class="nav-link expanded" data-toggle="collapse" style="padding-top:10px;padding-bottom:10px;font-size:15px;font-weight:bold;color:white;background-color:#2e353d;cursor:default"> Profile <:--<span class="caret"></span>--> </a> <;--<ul class="dropdown-menu">--> <ul class="flex-column nav"> <li class="nav-item"> <a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Profile/Item1">Item 1</a> </li> <li class="nav-item"> <a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Profile/Item2">Item 2</a> </li> <li class="nav-item"> <a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Profile/Item3">Item 3</a> </li> <li class="nav-item"> <a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Profile/Item4">Item 4</a> </li> <li class="nav-item"> <a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Profile/Item5">Item 5</a> </li> </ul> </li> </ul> <ul class="nav navbar-nav"> <li> <a href="" class="nav-link expanded" data-toggle="collapse" style="padding-top:10px;padding-bottom:10px;font-size:15px;font-weight:bold;color:white;background-color:#2e353d;cursor:default"> Options </a> <ul class="flex-column nav"> <li class="nav-item"> <a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Options/Item6">Item 6</a> </li> <li class="nav-item"> <a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Options/Item7">Item 7</a> </li> </ul> </li> </ul> <ul class="nav navbar-nav"> <li> <a href="" class="nav-link expanded" data-toggle="collapse" style="padding-top:10px;padding-bottom:10px;font-size:15px;font-weight:bold;color:white;background-color:#2e353d;cursor:default"> Reports </a> <ul class="flex-column nav"> <li class="nav-item"> <a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Report/Item8">Item 8</a> </li> <li class="nav-item"> <a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Report/Item9">Item 9</a> </li> <li class="nav-item"> <a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Report/Item10">Item 10</a> </li> <li class="nav-item"> <a style="padding-top:10px;padding-bottom:10px.font-size:15px." class="nav-link" href="Report/Item11">Item 11</a> </li> </ul> </li> </ul> </div> <div class="navbar-header" style="padding-top. 0px"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav-side-menu"> <span class="icon-bar">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </div> </nav> <.-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https.//ajax.googleapis,com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <.-- Include all compiled plugins (below). or include individual files as needed --> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> </body>
任何帮助表示赞赏。 谢谢
编辑：我现在可以隐藏和显示调整 window 大小的侧边菜单。 并且还显示切换按钮隐藏和显示在较小的屏幕中。 但是，当在较小的屏幕中切换（隐藏）菜单并且调整 window 的大小时，如何使菜单再次出现？
由于您已经在使用 Bootstrap 4，它有一个内置的 class 已经做到了。 看看Bootstrap Navbar 响应式
它更可取，它会自动响应从手机到台式机等的每个屏幕。 所以请阅读它。
通过调整 css styles，我能够在较小的屏幕上隐藏和显示菜单。 请看原帖的评论。
Bootstrap 的问题：小屏幕（移动设备）上的导航栏折叠不起作用
[英]Problems with Bootstrap: Navbar collapse on small screens ( mobile) does not work
如何制作菜单，导航栏，导航药片，导航堆栈折叠Twitter-bootstrap 3.0
[英]How to make menu, navbar nav-pills nav-stacked collapse Twitter-bootstrap 3.0
Bootstrap 3-是否可以不折叠导航栏，而不折叠边栏到导航栏菜单？
[英]Bootstrap 3 - Is it possible not to collapse navbar, and collapse sidebar to navbar menu?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.