Question

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

任何具有自举经验的人都可以帮助我们，如果我们可以使这个导航丸可以折叠并且在缩小尺寸时做出响应，就像我们可以通过导航栏轻松做到一样吗？

提前致谢

Answer 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

Answer 2

另一种尝试方法是将navbar li设置为100%：

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

Answer 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

中查看

Answer 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');，则会在完全关闭之前显示水平菜单一小段时间。

希望这会对某人有所帮助。

Answer 5

.nav-justified类的引导程序将处理所有事情。这将调整宽度超过768px的浏览器中的链接。比这更小，链接将被堆叠。只需将其添加到元素中即可。

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

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

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

Answer 6

我试图将navbar-pills包裹到navbar-collapse中，但它看起来很糟糕，因为它有不同的缩进。所以我使用类visible-xs（用于导航栏折叠）和hidden-xs（用于导航丸）制作了两个不同的导航栏。

使nav-pills可以像boot -rap中的nav-bar一样折叠

6 个答案: