Выравнивание встроенной формы в navbar-bootsrap

Question

У меня есть этот код, где я хочу добавить встроенную форму справа от навигационной панели. Однако эта форма не правильно выровнена, и я смущен.

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

    <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="#"><img src="img/logo.png" height=30 width=41></a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a></li> 
     <li><a href="Assingment.html"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
      <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> Menu <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Appetizers</a></li> 
      <li><a href="#">Main Courses</a></li> 
      <li><a href="#">Desserts</a></li> 
      <li><a href="#">Drinks</a></li> 
      <li role="separator" class="divider"></li> 
      <li class="dropdown-header">Specials</li> 
      <li><a href="#">Lunch Buffet</a></li> 
      <li><a href="#">Weekend Brunch</a></li> 
      </ul> 
     </li> 
     <li><a href="contactus.html"><i class="fa fa-envelope-o"></i> Contact</a></li> 

     </ul> 
     <div class="nav navbar-nav navbar-right"></div> 
     <form class="form-inline"> 
     <div class="form-group"> 
      <label class="sr-only" for="email">Email address</label> 
      <input type="text" class="form-control" id="email" name="Email" placeholder="Email"> 
     </div> 
     <div class="form-group"> 
      <label class="sr-only" for="password">Password</label> 
      <input type="password" class="form-control" id="password" placeholder="Password"> 
     </div> 
     <div class="checkbox"> 
      <label style="color:white;">   
      <input type="checkbox">Remember me 
      </label> 
     </div> 
     <button type="submit" class="btn btn-info">Sign In</button> 
     </form> 
    </div> 
    </div> 

    </div> 
</nav> 

Вот как это выглядит.

Я делаю что-то неправильно, но я не могу видеть это.

Answer 1

Вы закрыли .navbar-right div до form открытие. Это должно быть:

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

    <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="#"><img src="img/logo.png" height=30 width=41></a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a></li> 
     <li><a href="Assingment.html"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
      <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> Menu <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Appetizers</a></li> 
      <li><a href="#">Main Courses</a></li> 
      <li><a href="#">Desserts</a></li> 
      <li><a href="#">Drinks</a></li> 
      <li role="separator" class="divider"></li> 
      <li class="dropdown-header">Specials</li> 
      <li><a href="#">Lunch Buffet</a></li> 
      <li><a href="#">Weekend Brunch</a></li> 
      </ul> 
     </li> 
     <li><a href="contactus.html"><i class="fa fa-envelope-o"></i> Contact</a></li> 

     </ul> 
     <div class="nav navbar-nav navbar-right"> 
     <form class="form-inline"> 
      <div class="form-group"> 
      <label class="sr-only" for="email">Email address</label> 
      <input type="text" class="form-control" id="email" name="Email" placeholder="Email"> 
      </div> 
      <div class="form-group"> 
      <label class="sr-only" for="password">Password</label> 
      <input type="password" class="form-control" id="password" placeholder="Password"> 
      </div> 
      <div class="checkbox"> 
      <label style="color:white;">   
       <input type="checkbox">Remember me 
      </label> 
      </div> 
      <button type="submit" class="btn btn-info">Sign In</button> 
     </form> 
     </div> 
    </div> 
    </div> 

    </div> 
</nav>