在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开放前关闭form div。它应该是：

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