Bootstrap：导航栏：导航侧菜单：在小屏幕上折叠
Posted
技术标签:
【中文标题】Bootstrap：导航栏：导航侧菜单：在小屏幕上折叠【英文标题】：Bootstrap: Navbar: nav-side-menu: collapse on small screens 【发布时间】：2020-12-01 06:51:02 【问题描述】：我的 html 页面中有一个导航侧菜单，显示固定顶部和固定左侧。我想要做的是让它折叠到左侧并在小屏幕上查看时显示一个带有 3 个条的按钮（我不希望它消失）。例如，当窗口变小时侧边栏的折叠方式：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 a i
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>感谢任何帮助。 谢谢
编辑：我现在可以在调整窗口大小时隐藏和显示侧边菜单。并且还显示切换按钮隐藏和显示在较小的屏幕中。 但是，当菜单在较小的屏幕中切换（隐藏）并且窗口调整大小时，如何再次显示菜单？
【问题讨论】：
您可以查看链接：w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_push 感谢您的建议。我的代码已经有一个“切换导航”按钮来完成切换菜单的工作。我正在寻找的是菜单自动幻灯片和折叠到较小屏幕上的3个条形按钮。 span> 【参考方案1】：由于您已经在使用 Bootstrap 4，它有一个内置的类可以做到这一点。看Bootstrap Navbar Responsive 它更可取，它会自动响应从手机到台式机等的每个屏幕。所以请阅读它。
【讨论】：
【参考方案2】：通过调整 css 样式，我能够在较小的屏幕上隐藏和显示菜单。请参阅原帖中的 cmets。
【讨论】：
以上是关于Bootstrap：导航栏：导航侧菜单：在小屏幕上折叠的主要内容，如果未能解决你的问题，请参考以下文章
如何让 twitter-bootstrap 导航栏子项在小屏幕上折叠/展开？