Html 使导航丸像引导程序中的导航栏一样可折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23109704/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
makes nav-pills collapsable just like nav-bar in bootstrap
提问by Siavosh
we are developing an application and we are using twiiter bootstrap 3 we have created a navigation bar with nav-pills
我们正在开发一个应用程序，我们正在使用 twiiter bootstrap 3 我们创建了一个带有导航药丸的导航栏
<ul class="nav nav-pills head-menu">
<input type="hidden" id="selected_menu_item" value="=$selectedMenuId; ?>" />
<li>
<a href="#" id="welcome">
Welcome text ...
</a>
</li>
<li><a href="#" id="kitchen">Kitchen</a></li>
<li><a href="#" id="programma" > Programma</a></li>
<li><a href="#" id="foodart" >foodart text</a></li>
</ul>
can anyone with bootstrap experience help us, if we can make this nav-pills collapsible and responsive when size is reduced just as we can do easily with nav-bars?
任何有引导程序经验的人都可以帮助我们吗，如果我们可以像使用导航栏一样轻松地在缩小尺寸时使这个导航药丸可折叠和响应？
thanks in advance
提前致谢
回答by Tricky12
First, you need to include HTML for the menu button once your menu collapses.
首先，您需要在菜单折叠后为菜单按钮包含 HTML。
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
Then, you need to wrap your nav-pillsin a div containing Bootstrap's collapse class.
然后，您需要将您nav-pills的 div包装在包含 Bootstrap 折叠类的 div 中。
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav nav-pills head-menu">
<input type="hidden" id="selected_menu_item" value="=$selectedMenuId; ?>" />
<li><a href="#" id="welcome">Welcome text ...</a></li>
<li><a href="#" id="kitchen">Kitchen</a></li>
<li><a href="#" id="programma" > Programma</a></li>
<li><a href="#" id="foodart" >foodart text</a></li>
</ul>
</div>
You can then wrap all of this in a fluid-container and Bootstrap's navbar navbar-defaultwith role=navigation.
然后，您可以将所有这些包装在一个流体容器中，并navbar navbar-default使用role=navigation.
Additionally, you could add a bit of jQuery to handle "stacking" your menu when it is collapsed instead of remaining horizontal. To do this, Bootstrap's events for show/hide collapse will do the trick: show.bs.collapseand hide.bs.collapse.
此外，您可以添加一些 jQuery 来处理菜单折叠而不是保持水平时的“堆叠”菜单。为此，Bootstrap 的显示/隐藏折叠事件将起作用：show.bs.collapse和hide.bs.collapse.
//Stack menu when collapsed
$('#bs-example-navbar-collapse-1').on('show.bs.collapse', function() {
$('.nav-pills').addClass('nav-stacked');
});
//Unstack menu when not collapsed
$('#bs-example-navbar-collapse-1').on('hide.bs.collapse', function() {
$('.nav-pills').removeClass('nav-stacked');
});
回答by blah
Another method to try is to set navbar lito 100%:
另一种尝试的方法是设置navbar li为100%：
@media (max-width: 768px) {
#navbar li { width:100%; }
}
回答by Hitesh Sahu
Complete Solution
完整的解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
body {
background-color: linen;
}
.nav {
background-color :#722872;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.navbar {
background-color :#722872;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav nav-pills navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
OR
See it inCodePan
回答by Jinga Laurentiu
@Tricky12 has a good solution, i used for myself, just changed the last part.
@Tricky12 有一个很好的解决方案，我自己用过，只是更改了最后一部分。
//Unstack menu when not collapsed
$('#bs-example-navbar-collapse-1').on('hidden.bs.collapse', function() {
$('.nav-pills').removeClass('nav-stacked');
});
The part: hidden.bs.collapse trigger when the menu is fully closed, while hide.bs.collapse trigger when it starting to close.
部分：hidden.bs.collapse 在菜单完全关闭时触发，而 hide.bs.collapse 在菜单开始关闭时触发。
if you trigger the .removeClass('nav-stacked');before collapsed menu it fully closed, will show the horizontal menu for a fraction of a second before is fully closed.
如果触发.removeClass('nav-stacked');前折叠菜单完全关闭，将在完全关闭前显示水平菜单几分之一秒。
Hope this will help someone.
希望这会帮助某人。
回答by dars
The .nav-justified class of bootstrap will take care of everything. This will resize the links in browsers wider than 768px. Smaller than that, the links will be stacked. Simply add it to the element and you are good to go.
.nav-justified 类的引导程序将处理一切。这将调整浏览器中链接的大小，使其宽度超过 768 像素。小于该值，链接将被堆叠。只需将其添加到元素中即可。
<ul class="nav nav-pills head-menu nav-justified">
...[rest of your code stays the same]...
Doesn't address the question how to collapse the items, I am stating how to stack them. So my answer might not help, but I think it contributes, hopefully.
没有解决如何折叠项目的问题，我在说明如何堆叠它们。所以我的回答可能无济于事，但我认为它有帮助，希望如此。
回答by iBljad
I've tried to wrap navbar-pillsinto navbar-collapsebut it was looking awful, because it has different indents. So I made two different navbars using classes visible-xs(for navbar-collapse) and hidden-xs(for nav-pills).
我试着总结navbar-pills到navbar-collapse，但它一直在寻找可怕的，因为它有不同的缩进。所以我使用类visible-xs（用于导航栏折叠）和hidden-xs（用于导航药丸）制作了两个不同的导航栏。
