使nav-pills像bootstrap中的nav-bar一样可折叠

Question

使nav-pills像bootstrap中的nav-bar一样可折叠

htmltwitter-bootstrapresponsive-designtwitter-bootstrap-3

23

我们正在开发一个应用程序，使用 Twitter 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>

有 Bootstrap 经验的人能帮我们吗？就像我们可以轻松地对导航栏进行折叠和响应式处理一样，如果我们可以使这个 "nav-pills" 在尺寸缩小时也可以折叠和响应式处理。

提前致谢。

- Siavosh

5个回答

8

另一种尝试的方法是将“navbar li”设置为“100%”:

@media (max-width: 768px) {
  #navbar li { width:100%; }
}

- blah

那不是崩溃了，而是帮助了我！谢谢。 - João Paulo Motta

4

完整解决方案

<!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上的演示

- Hitesh Sahu

3

@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'); ，会在菜单完全关闭之前显示水平菜单的一瞬间。

希望这能帮助到某些人。

- Jinga Laurentiu

0

Bootstrap的.nav-justified类会处理一切。这将在宽度大于768px的浏览器中调整链接大小。小于此尺寸，链接将被堆叠。只需将其添加到元素中，您就可以开始使用了。

<ul class="nav nav-pills head-menu nav-justified">

...[rest of your code stays the same]...

并没有回答如何折叠项目的问题，我只是在说明如何堆叠它们。所以我的回答可能没有帮助，但我认为它有所贡献，希望如此。

- dars

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tricky12 · Accepted Answer

首先，在菜单折叠后，您需要包含用于菜单按钮的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>

接下来，您需要将包含Bootstrap的collapse类的div包装在nav-pills中。

<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>

你可以将所有这些内容放在一个流体容器中，并使用带有role=navigation的Bootstrap的navbar navbar-default。

此外，您还可以添加一些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');
});

这里有可运行的演示