导航栏折叠在 Bootstrap 中不起作用答案

【问题标题】：Navbar collapse is not working in Bootstrap导航栏折叠在 Bootstrap 中不起作用
【发布时间】：2016-11-27 18:05:37
【问题描述】：

@Bhanu pratap 解决了这个问题。在这个问题的末尾查看它。

我一直在遵循旧课程来构建导航栏折叠（三明治）。问题是课程中的页面顶部似乎有一个黑条，并且在缩小页面时会出现导航栏。对我来说，我只是在左边得到一个按钮。另外，当我缩小页面时，我看不到导航栏。

这里是源代码：

<!DOCTYPE html>
<html lang="arabic">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="description" content="">

    <meta name="author" content="">

    <link rel="icon" herf="assets/img/favicon.ico">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="assets/js/jquery-3.1.1.min.js"></script>
    <script src="assets/js/main.js"></script>

    <!-- Bootstrap core CSS -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">

    <!-- Font-Awesome icons-->
    <link href="assets/css/font-awesome/css/font-awesome.min.css">

    <!-- Google Fonts LATEEF -->
    <link href="https://fonts.googleapis.com/css?family=Changa:400,600&amp;subset=arabic,latin-ext" rel="stylesheet">

    <title>Bootstrap to Wordpress</title>




        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

  </head>

  <body>

    <!-- HEADER -->
    <header class="site-header" role="banner">

         <!-- NAVBAR -->
         <div class="navbar-wrapper">
             <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

                  <div class="container">
                      <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" herf="/"><img src="assets/img/logo.png" alt="Bootstrap to WordPress"></a>
                      </div><!-- navbar-header -->
                      <div class="navbar-collapse collapse">

                      </div><!-- collapse nav-->
                  </div><!-- container -->

             </div><!-- navbar -->


         </div><!-- navbar-wrapper-->


    </header>

    <!-- FOOTER TAG -->
    <footer>

    </footer>

    <!-- MODAL -->
    <div>

    </div>

    <!-- BOOTSTRAP CORE JAVASCRIPT
          PLACED AT THE END OF THE DOCUMENT SO THE PAGES
          LOAD FASTER!
    ================================================== -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="assets/js/jquery-3.1.1.min.js"></script>
    <script src="assets/js/main.js"></script>

    <!-- Type google font -->
    <script src="https://use.typekit.net/byz5vqz.js"></script>
    <script>try{Typekit.load({ async: true });}catch(e){}</script>

  </body>
</html>

我尝试用另一个源代码更改这部分，但问题再次出现。

 <!-- NAVBAR -->
             <div class="navbar-wrapper">
                 <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

                      <div class="container">
                          <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" herf="/"><img src="assets/img/logo.png" alt="Bootstrap to WordPress"></a>
                          </div><!-- navbar-header -->
                          <div class="navbar-collapse collapse">

                          </div><!-- collapse nav-->
                      </div><!-- container -->

                 </div><!-- navbar -->
            </div><!-- navbar-wrapper-->

更新： @Bhanu pratap 通过 addin ul 和 li 解决了这个问题，以显示可见的效果。这是他的源代码：

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="navbar-wrapper">
        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" herf="/"><img src="assets/img/logo.png" alt="Bootstrap to WordPress"></a>
                </div><!-- navbar-header -->
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="">First Menu Item</a>
                        </li>
                        <li>
                            <a href="">Second Menu Item</a>
                        </li>
                        <li>
                            <a href="">Third Menu Item</a>
                        </li>
                    </ul>
                </div><!-- collapse nav-->
            </div><!-- container -->

        </div><!-- navbar -->
    </div>

【问题讨论】：

您使用 jquery 3.1 和 bootstrap 需要 jquery 2 或更低版本。尝试使用早期版本的 jquery
我已将其更改为 jquery 2，但仍然遇到同样的问题。

标签： html css twitter-bootstrap navbar

【解决方案1】：

试试这个..我刚刚在您的代码中添加了 ul 和 li 以显示可见的效果，您可以在那里使用您的代码部分..

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="navbar-wrapper">
        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" herf="/"><img src="assets/img/logo.png" alt="Bootstrap to WordPress"></a>
                </div><!-- navbar-header -->
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="">First Menu Item</a>
                        </li>
                        <li>
                            <a href="">Second Menu Item</a>
                        </li>
                        <li>
                            <a href="">Third Menu Item</a>
                        </li>
                    </ul>
                </div><!-- collapse nav-->
            </div><!-- container -->

        </div><!-- navbar -->
    </div>

【讨论】：

【解决方案2】：

$(document).on('click','.navbar-collapse.in',function(e) {
   if( $(e.target).is('a') && ( $(e.target).attr('class') != 'dropdown-toggle' ) ) {
   $(this).collapse('hide');
} });

$("button.navbar-toggle").click(function (e) {
  $("#main-navbar").collapse('hide');
  $("#main-navbar").removeClass("in"); });

【讨论】：

感谢通过“隐藏”折叠修复我的问题