bootstrap 3 - 在图标前面的右侧放置一个搜索输入

Question

我有一个HTML：

<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav navbar-right">
    <li>
        <a href="#"><span class="glyphicon glyphicon-search"></span></a>
    </li>
    <li>
        <a href="#"><span class="glyphicon glyphicon-fire"></span></a>
    </li>
    <li>
        <a href="profile.html"><span class="glyphicon glyphicon-user"></span></a>
    </li>
    <li>
        <a href="#"><span class="glyphicon glyphicon-log-out"></span></a>
    </li>
  </ul>
</div>

我想在右侧但在图标前放置搜索输入。所以我添加了一个表单：

<div class="collapse navbar-collapse">
  <form class="navbar-form navbar-right" role="search">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
    </div>      
  </form>
  <ul class="nav navbar-nav navbar-right">
    <li>
        <a href="#"><span class="glyphicon glyphicon-search"></span></a>
    </li>
    <li>
        <a href="#"><span class="glyphicon glyphicon-fire"></span></a>
    </li>
    <li>
        <a href="profile.html"><span class="glyphicon glyphicon-user"></span></a>
    </li>
    <li>
        <a href="#"><span class="glyphicon glyphicon-log-out"></span></a>
    </li>
  </ul>
</div>

得到了它：

而不是（油漆图片）：

应该怎样做才能使它成为第二张图片？

Answer 1

试试这个..

 <div class="collapse navbar-collapse">

      <ul class="nav navbar-nav navbar-right">
       <li>
            <form class="navbar-form navbar-right" role="search">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
             </div>      
            </form>
       </li>
        <li>
            <a href="#"><span class="glyphicon glyphicon-search"></span></a>
        </li>
        <li>
            <a href="#"><span class="glyphicon glyphicon-fire"></span></a>
        </li>
        <li>
            <a href="profile.html"><span class="glyphicon glyphicon-user"></span></a>
        </li>
        <li>
            <a href="#"><span class="glyphicon glyphicon-log-out"></span></a>
        </li>
      </ul>
    </div>

Answer 2

您需要在UI标记下移动表单标记。 喜欢这个

<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav navbar-right">
    <li>
        <a href="#"><span class="glyphicon glyphicon-search"></span></a>
    </li>
    <li>
        <a href="#"><span class="glyphicon glyphicon-fire"></span></a>
    </li>
    <li>
        <a href="profile.html"><span class="glyphicon glyphicon-user"></span></a>
    </li>
    <li>
        <a href="#"><span class="glyphicon glyphicon-log-out"></span></a>
    </li>
  </ul>
  <form class="navbar-form navbar-right" role="search">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
    </div>      
  </form>  
</div>