使 nav-pills 可折叠，就像引导程序中的导航栏一样
Posted
技术标签:
【中文标题】使 nav-pills 可折叠，就像引导程序中的导航栏一样【英文标题】：makes nav-pills collapsable just like nav-bar in bootstrap 【发布时间】：2014-05-31 08:11:38 【问题描述】：我们正在开发一个应用程序，我们正在使用 twiiter bootstrap 3 我们用 nav-pills 创建了一个导航栏
<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>
任何有引导经验的人都可以帮助我们吗，如果我们可以让这个 nav-pills 在尺寸减小时可折叠和响应，就像我们可以使用导航栏轻松做到一样？
提前致谢
【问题讨论】：
【参考方案1】：首先，您需要在菜单折叠后为菜单按钮添加 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>
然后，您需要将 nav-pills 包装在包含 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>
然后，您可以将所有这些包装在一个流体容器和 Bootstrap 的 navbar navbar-default 和 role=navigation 中。
此外，您可以添加一些 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');
);
Working Demo Here
【讨论】：
从头开始创建的完整教程，喜欢答案！ 什么决定何时折叠导航栏？如何设置折叠视口大小？ @flute 您正在寻找的是 bootstrap.css 文件。有一些媒体查询可以确定何时折叠导航栏。您可以更改媒体查询断点 (getbootstrap.com/customize/#media-queries-breakpoints) 或网格浮动断点 (getbootstrap.com/customize/#grid-system)。使用这些链接，您可以修改并下载自定义引导 CSS 表并使用它。 更好的脚本实现是： $('#menu-selector').on('show.bs.collapse hidden.bs.collapse', function () $(this).find ('.nav-pills').toggleClass('nav-stacked'); ); 谢谢！这个答案帮助了我。另外，对于其他信息，您需要将两个 div 都放在<div class="container-fluid"><nav class="navbar navbar-default" role="navigation"> 中（作者在文本中也提到过）。另外，navbar-header 可能会添加它自己的默认背景，所以如果你不想要它，你可以使用.navbar-default background:transparent; border-color: transparent; 。另外，为了让它看起来更漂亮，我改用了$('.nav-pills').addClass('nav-stacked nav-justified'); 和$('.nav-pills').removeClass('nav-stacked nav-justified');【参考方案2】：
另一种尝试的方法是将navbar li 设置为100%：
@media (max-width: 768px)
#navbar li width:100%;
【讨论】：
这不是崩溃，而是帮助了我！谢谢。【参考方案3】：完整的解决方案
<!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
查看 CodePan
【讨论】：
【参考方案4】：@Tricky12 有一个很好的解决方案，我自己用的，只是改了最后一部分。
//Unstack menu when not collapsed
$('#bs-example-navbar-collapse-1').on('hidden.bs.collapse', function()
$('.nav-pills').removeClass('nav-stacked');
);
部分：hidden.bs.collapse 在菜单完全关闭时触发，而 hide.bs.collapse 在菜单开始关闭时触发。
如果您在折叠菜单完全关闭之前触发.removeClass('nav-stacked');，则会在完全关闭之前显示水平菜单几分之一秒。
希望这会对某人有所帮助。
【讨论】：
【参考方案5】：.nav-justified 类的 bootstrap 会处理所有事情。这将调整浏览器中的链接大小超过 768 像素。比这小，链接将被堆叠。只需将其添加到元素中即可。
<ul class="nav nav-pills head-menu nav-justified">
...[rest of your code stays the same]...
没有解决如何折叠项目的问题，我在说明如何堆叠它们。所以我的回答可能无济于事，但我认为它有帮助，希望如此。
【讨论】：
以上是关于使 nav-pills 可折叠，就像引导程序中的导航栏一样的主要内容，如果未能解决你的问题，请参考以下文章