如何在导航栏 header 中对齐搜索表单？

Question

我有一个品牌形象和一个列表，其中包括 2 个 glyph-icons & 和导航栏中的搜索表单 header 但搜索表单按钮不会留在导航栏中并会掉落到下面的行。

有谁知道 CSS 把它放在其余 li 链接旁边的同一行上的技巧吗？

所有 CSS 都是引导程序本机命令。

为了完全理解，一张当前照片：

HTML:

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <div class="navbar-header">
        <img id="brand-image" alt="DEVO Logo" src="/Applications/MAMP/htdocs/D0.1/images/DEVOorig.png"/>
      </div>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-user"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a></li>
        <li>
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

很简单，您必须将 css 规则 display: inline-block; 添加到您的 form-group 中，仅此而已。您甚至可以删除周围的 li

勾选Fiddle

Answer 2

将 class .form-inline 添加到 .form-control div。另外，将按钮插入 div.

查看结果：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <div class="navbar-header">
        <img id="brand-image" alt="DEVO Logo" src="/Applications/MAMP/htdocs/D0.1/images/DEVOorig.png"/>
      </div>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-user"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a></li>
        <li>
          <div class="form-group form-inline">
            <input type="text" class="form-control" placeholder="Search">
            <button type="submit" class="btn btn-default">Submit</button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

http://jsbin.com/gogeyiy/edit?html,output

Answer 3

您可以尝试这样输入组，而不是表单组：Demo

<div class="input-group">
            <input type="text" class="form-control" placeholder="Search">
            <span class="input-group-btn">
    <button class="btn btn-default" type="button">Submit</button>
      </span>
</div>

如何在导航栏 header 中对齐搜索表单？

How to align the search form within the navbar header?

html

css

navbar

twitter-bootstrap