BootStrap导航栏手机端的那个按钮为什么点了没反应?

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->

    <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://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

    <link href="css/diban.css" rel="stylesheet">

    

  </head>

  <body>

    <div>

      <h1><img style="margin-left:5%" src="images/logo.png"> <small style="margin-right:5%;color:#c41723;">Service hotline:400-1234-5678</small></h1>

    </div>

    <nav class="navbar navbar-inverse" role="navigation">

   <div>

     <!-- Brand and toggle get grouped for better mobile display -->

     <div>

       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

         <span>Toggle navigation</span>

         <span></span>

         <span></span>

        <span></span>

       </button>

       <a href="#">Brand</a>

     </div>


     <!-- Collect the nav links, forms, and other content for toggling -->

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

       <ul class="nav navbar-nav">

         <li><a href="#">BRANDS<span>(current)</span></a></li>

         <li>

           <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">FLOOR TYPES & ACCESSORIES <span></span></a>

           <ul>

             <li><a href="#">Action</a></li>

             <li><a href="#">Another action</a></li>

             <li><a href="#">Something else here</a></li>

             <li><a href="#">Separated link</a></li>

             <li><a href="#">One more separated link</a></li>

           </ul>

         </li>

         <li>

           <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">STAIRS <span></span></a>

           <ul>

             <li><a href="#">Action</a></li>

             <li><a href="#">Another action</a></li>

             <li><a href="#">Something else here</a></li>

             <li><a href="#">Separated link</a></li>

             <li><a href="#">One more separated link</a></li>

           </ul>

         </li>

         <li><a href="#">INSTALLATION</a></li>

         <li><a href="#">GALLERY</a></li>

         <li><a href="#">CONTACT US</a></li>

       </ul>

     </div><!-- /.navbar-collapse -->

   </div><!-- /.container-fluid -->

</nav>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

  </body>

</html>


慕标1401327
浏览 4573回答 2
2回答

幕布斯7574896

bootstrap有相应的类名规范的。你可以看看我的截图

泸州月4238907

不如你试试 display:block;
打开App,查看更多内容
随时随地看视频慕课网APP