Bootstrap 切换导航栏不显示内容

Question

我是 bootstrap 的新手，我的切换导航栏菜单有问题。当屏幕尺寸缩小到移动尺寸时，数据或列表项不会出现，出现切换按钮，但它什么也没做。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- The above 3 meta tags *must* come first in the head; any other         head content must come *after* these tags -->
      <title>Bootstrap 101 Template</title>

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

      <!-- 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.2/html5shiv.min.js"> </script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->

      </head>
      <body>
         <div class="navbar navbar-default" role="navigation">
           <div class="container">
             <div class="navbar-header">
               <button type="button" class="navbar-toggle" data- toggle="collapse" data-target="navbar-container">
               <span class="sr-only">Show & hide the Navigation</span>
               </button>
             </div>
             <div class="collapse navbar-collapse" id="navbar-container">
                <ul class="nav navbar-nav">
                   <li><a href="#">Home</a></li>
                   <li><a href="#">Profile</a></li>
                   <li><a href="#">Contact Us</a></li>
                </ul>
             </div>

         </div>    
      </div>

       <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
       <script    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">        </script>
         <!-- Include all compiled plugins (below), or include individual files   as needed -->
      <script src="js/bootstrap.min.js"></script>
      </body>
      </html>

Answer 1

实际上您的代码中有 2 个错误。

替换此行

<button type="button" class="navbar-toggle" data- toggle="collapse" data-target="navbar-container">

那个

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container">

原因

data-toggle 之间有一个 space，而您没有在 data-target 属性中放置 # 带有 navbar-container 的符号。

Bootstrap 切换导航栏不显示内容

Bootstrap toggle navbar not showing content

navbar

twitter-bootstrap