[英]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.