Bootstrap：导航栏：导航侧菜单：在小屏幕上折叠

Question

I have a nav-side-menu in my html page that shows up fixed top and fixed left.我的 html 页面中有一个导航侧菜单，显示固定顶部和固定左侧。 What I am trying to do is get it to collapse to the left side and show a button with 3 bars when viewed on small screens(I don't want it to disappear).我想要做的是让它折叠到左侧并在小屏幕上查看时显示一个带有 3 个条的按钮（我不希望它消失）。 For example, the way the sidebar collapses when the window is made smaller: https://pro.propeller.in/components/sidebar.php .例如，当 window 变小时侧边栏的折叠方式： https://pro.propeller.in/components/sidebar.php 。 This is how far I got:这是我走了多远：

 .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&nbsp; <:--<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&nbsp; </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&nbsp; </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>

Any help is appreciated.任何帮助表示赞赏。 Thank you谢谢

Edit: I am now able to hide and show the side menu on resizing the window.编辑：我现在可以隐藏和显示调整 window 大小的侧边菜单。 And also show the toggle button hide and display in smaller screens.并且还显示切换按钮隐藏和显示在较小的屏幕中。 But, when the menu is toggled(hidden) in smaller screen and the window is resized, how do I make the menu appear again?但是，当在较小的屏幕中切换（隐藏）菜单并且调整 window 的大小时，如何使菜单再次出现？

Answer 1

Since you are already using Bootstrap 4, it has such an inbuilt class to already do it.由于您已经在使用 Bootstrap 4，它有一个内置的 class 已经做到了。 Look at Bootstrap Navbar Responsive看看Bootstrap Navbar 响应式
It is preferable and it automatically is responsive for every screen from mobiles to desktops and many more.它更可取，它会自动响应从手机到台式机等的每个屏幕。 So please have a read at it.所以请阅读它。

Answer 2

By adjusting css styles, I was able to hide and show the menu on smaller screens.通过调整 css styles，我能够在较小的屏幕上隐藏和显示菜单。 Please see comments on the original post.请看原帖的评论。

Bootstrap：导航栏：导航侧菜单：在小屏幕上折叠

问题描述

2 个解决方案

解决方案1
0 2020-08-11 15:08:16

解决方案2
0 已采纳 2020-08-12 14:40:54

Bootstrap：导航栏：导航侧菜单：在小屏幕上折叠

问题描述

2 个解决方案

解决方案1 0 2020-08-11 15:08:16

解决方案2 0 已采纳 2020-08-12 14:40:54

解决方案1
0 2020-08-11 15:08:16

解决方案2
0 已采纳 2020-08-12 14:40:54