使 nav-pills 可折叠，就像引导程序中的导航栏一样答案

【问题标题】：makes nav-pills collapsable just like nav-bar in bootstrap使 nav-pills 可折叠，就像引导程序中的导航栏一样
【发布时间】：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 在尺寸减小时可折叠和响应，就像我们可以使用导航栏轻松做到一样？

提前致谢

【问题讨论】：

标签： html twitter-bootstrap responsive-design twitter-bootstrap-3

【解决方案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]...

没有解决如何折叠项目的问题，我在说明如何堆叠它们。所以我的回答可能无济于事，但我认为它有帮助，希望如此。

【讨论】：