Bootstrap 导航栏中的文本输入答案

【问题标题】：Text input at the Bootstrap navbarBootstrap 导航栏中的文本输入
【发布时间】：2016-07-20 03:29:55
【问题描述】：

我正在使用 Bootstrap 制作导航栏，当我尝试添加搜索栏时，它位于其他元素下方而不是在它们旁边。

我在所有内容之后都导入了 jQuery 和 Bootstrap JavaScript，以及在 head 标签中导入的 Bootstrap CSS。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#"><img src="logo.png"></a>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Home</a></li>

          <form class="navbar-form">
            <input type="text" class="form-control" placeholder="Search">
            <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
         </form>
       </ul>
     </div>
   </div>
 </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

【问题讨论】：

w3schools.com/cssref/pr_class_float.asp
我会在什么元素上使用它

标签： html twitter-bootstrap navbar

【解决方案1】：

您可以使用Default navbar 作为示例。
将表单放在<ul></ul> 块之外。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#"><img src="logo.png"></a>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
      </form>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

【讨论】：