（引导程序）可折叠的导航栏按钮看起来不正确，不在正确的区域？

Question

我想添加一个按钮，当屏幕小于一定大小时，折叠/显示导航栏。这个按钮不仅显示不正确（它只显示1个水平条而不是3个），因为我希望它位于屏幕的最右侧，所以如果您调整浏览器的大小，它与http://getbootstrap.com/examples/carousel/类似。它目前的样子：http://prntscr.com/5zif5q

导航栏代码：

<div class="navbar-wrapper"> 
    <div class="container"> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 

      <!-- Button for navbar when using small screen --> 
      <button type="button" class"navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 

      <!-- The horizontal lines of the navbar button for small screens --> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="dropdown"><a href="#fighters" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Fighters<span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu"> 
       <li><a href="#F7F-Tigercat">F7F-Tigercat</a></li> 
       <li><a href="#F8F-Bearcat">F8F-Bearcat</a></li> 
       </ul> 
      </li> 
      <li class="dropdown"><a href="#bombers" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Bombers<span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu"> 
       <li><a href="#B-17-Flying-Fortress">B-17 Flying Fortress</a></li> 
       <li><a href="#B-52-Stratofortress">B-52 Stratofortress</a></li> 
       </ul> 
      </li> 
      <li class="dropdown"><a href="#drones" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Drones<span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu"> 
       <li><a href="#MQ-1-Predator">MQ-1 Predator</a></li> 
       <li><a href="#MQ-9-Reaper">MQ-9 Reaper</a></li> 
       </ul> 
      </li> 
      </ul> 
     </div> 
     </div> 
    </nav> 
    </div> 
</div> 

Answer 1

您的代码看起来不错，我找不到错误。这是我的笔'[http://www.bootply.com/V92ijl6cch][1]

<div class="navbar-wrapper"> 
     <div class="container"> 

     <nav class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <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" href="#">Project name</a> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#about">About</a></li> 
       <li><a href="#contact">Contact</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
        <ul class="dropdown-menu" role="menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li class="divider"></li> 
        <li class="dropdown-header">Nav header</li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
        </ul> 
       </li> 
       </ul> 
      </div> 
      </div> 
     </nav> 

     </div> 
    </div>