Bootstrap 切换导航栏不显示内容答案

【问题标题】：Bootstrap toggle navbar not showing contentBootstrap 切换导航栏不显示内容
【发布时间】：2015-08-13 13:11:49
【问题描述】：

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

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

【问题讨论】：

标签： twitter-bootstrap navbar

【解决方案1】：

其实你的代码有两个错误。

替换此行

<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 之间有一个空格，并且您没有在 data-target 属性中使用 navbar-container 放置 # 符号。

【讨论】：