Question

我正在尝试使用户名，密码和按钮的表单与导航栏品牌和a标签位于同一行，但由于某种原因，它似乎在它们之下。

对此有什么解决方法？

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

  <div class="container">

  <a class="navbar-brand" href="#"> Log Me In! </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">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Location</a></li>
    </ul>
  </div>
  <form class="navbar-form navbar-right" role="search">
                <div class="form-group">
                    <input type="text" name="" value="" id="username" placeholder="Username">
                </div>
                <div class="form-group">
                    <input type="password" name="" value="" id="password" placeholder="Password">
                </div>
                <input type="button" id="logIn" value="Login">
  </form>
  </div>
</nav>

Answer 1

您需要使用类“collapse navbar-collapse navHeaderCollapse”来移动div中的表单。

 <div class="collapse navbar-collapse navHeaderCollapse">
    <ul class="nav navbar-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Location</a></li>
    </ul>

    <form class="navbar-form navbar-right" role="search">
      <div class="form-group">
        <input type="text" name="" value="" id="username" placeholder="Username">
      </div>
      <div class="form-group">
        <input type="password" name="" value="" id="password" placeholder="Password">
      </div>
      <input type="button" id="logIn" value="Login">
    </form>
  </div>

Answer 2

您需要将表单包装在可折叠div中

这就是你可以做的事情

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

  <div class="container">

  <a class="navbar-brand" href="#"> Log Me In! </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" id= "navHeaderCollapse">

    <ul class="nav navbar-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Location</a></li>
    </ul>
 
  <form class="navbar-form navbar-right" role="search">
                <div class="form-group">
                    <input type="text" name="" value="" id="username" class="form-control" placeholder="Username">
                </div>
                <div class="form-group">
                    <input type="password" name="" value="" id="password" class="form-control" placeholder="Password">
                </div>
                <input type="button" class="btn btn-sm btn-primary"  id="logIn" value="Login">
  </form>
   </div>
  </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
 </script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

并且还将class="form-control"提供给您的文本框并class="btn btn-sm btn-primary"以获得更好的样式按钮:)展开代码段（全屏）以查看更改，我已使您的菜单也可折叠，但它无法正常工作你给出的例子

navbar品牌和链接下的bootstrap navbar表单

2 个答案: