引导程序崩溃，下拉问题

当按下菜单按钮时，我想让下拉菜单显示在NAV BRAND（或左上角的导航徽标）的底部。但是，它出现在移动视图中的按钮旁边和中间。在这里看到：引导程序崩溃，下拉问题

下面是我HTML代码：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Bootstrap Tutorial</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="css/bootstrap.min.css"> 
     <link rel="stylesheet" href="css/normalize.css"> 
     <link rel="stylesheet" href="css/style1.css"> 
    </head> 
    <body> 

    <!-- TOP NAVBAR --> 
    <div class="navbar navbar-inverse navbar-static-top"> 
     <div class="container"> 
      <a href="#" class="navbar-brand">MOCK WEBSITE</a> 

      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

      <div class="collapse navbar-collapse navHeaderCollapse"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li class="active"><a href="#">HOME</a></li> 
        <li><a href="#">ABOUT</a></li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">PORTFOLIO <b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">PHOTOS</a></li> 
          <li><a href="#">VIDEOS</a></li> 
          <li><a href="#">MUSIC</a></li> 
         </ul> 
        </li> 
        <li><a href="#contact" data-toggle="modal">CONTACT</a></li> 
       </ul> 
      </div> 

     </div> <!-- Container --> 
    </div> <!-- Nav --> 



    <div class="jumbotron"> 
     <div class="container"> 
      <h1>MOCK WEBSITE</h1> 
      <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> 
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> 
     </div> 
    </div> 



    <div class="modal fade" id="contact" role="dialog"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <form class="form-horizontal"> 
        <div class="modal-header"> 
         <h4>Contact Me</h4> 
        </div> 
        <div class="modal-body"> 
         <div class="form-group"> 
          <label for="contact-name" class="col-lg-2 control-label">Name:</label> 
          <div class="col-lg-10"> 
           <input type="text" class="form-control" id="contact-name" placeholder="Full Name"> 
          </div> 
         </div> 

         <div class="form-group"> 
          <label for="contact-email" class="col-lg-2 control-label">Email:</label> 
          <div class="col-lg-10"> 
           <input type="email" class="form-control" id="contact-email" placeholder="[email protected]"> 
          </div> 
         </div> 

         <div class="form-group"> 
          <label for="contact-msg" class="col-lg-2 control-label">Message:</label> 
          <div class="col-lg-10"> 
           <textarea class="form-control" rows="8" placeholder="Write your message..."></textarea> 
          </div> 
         </div> 

        </div> 
        <div class="modal-footer"> 
         <button class="btn btn-primary" type="submit">Send</button> 
         <a class="btn btn-default" data-dismiss="modal">Close</a> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 


<div class="navbar navbar-inverse navbar-fixed-bottom"> 
    <div class="container"> 
     <p class="navbar-text pull-left">Site Built By Andrew Vu</p> 
     <a href="#" class="navbar-btn btn btn-danger pull-right">Subscribe on YouTube</a> 
    </div> 
</div> 




    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script src="js/bootstrap.js"></script> 

    </body> 
</html>

来源

2016-03-23 user3385997

你忘了包装navbar-header以集团品牌和按钮：

<div class="navbar-header"> 
    <a href="#" class="navbar-brand">MOCK WEBSITE</a> 

    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
</div>

jsfiddle-example

来源

2016-03-23 06:44:06

啊，那个诀窍！谢谢，伊戈尔！这很奇怪，因为我在网上学习一个教程，它为他工作。想知道为什么吗？我也跟着一步一步地做了... – user3385997

@ user3385997，还有一个小问题）在标记中写大写字母并不是最佳实践，您可以使用引导程序的类'文本 - 大写'[jsfiddle]（https： //jsfiddle.net/Igor_Ivancha/wc72464s/1/） –

引导程序崩溃，下拉问题

回答

相关问题