html - Bootstrap 3：将按钮组添加到导航栏

Question

在 twitter bootstrap 3 中，我想在导航栏中添加一个按钮组，但它似乎破坏了导航栏，因为它创建了换行符：

<li>
  <form class="navbar-form form-inline" >
    <div class="input-group">
      <input id="filter" class="form-control input-sm" type="text" placeholder="Filter" />
      <span class="input-group-btn">
        <button id="clearfilter" type="button" class="btn btn-sm btn-default">Clear</button>
      </span>
   </div>
</form>
</li>

如何避免导航栏中的换行符？

Answer 1

也许您不需要将表单放在列表项中：

        <!-- Start Of Example -->
        <form class="navbar-form form-inline">
            <div class="input-group">
                <input id="filter" class="form-control input-sm" type="text" placeholder="Filter" />
                <span class="input-group-btn">
                    <button id="clearfilter" type="button" class="btn btn-sm btn-default">Clear</button>
                </span>
             </div>
        </form>
        <!-- End Of Example -->

JS 小提琴示例

更新：另一种方法（您也可以使用 navbar-right 将 ul 块向右对齐）

<!-- Start Of Example -->
<ul class="nav navbar-nav">
   <li>
      <div class="navbar-form form-inline" role="form">
         <div class="form-group">
            <input id="filter" class="form-control input-sm" type="text" placeholder="Filter" />
         </div>
         <div class="form-group">
            <button id="clearfilter" type="button" class="btn btn-sm btn-default">Clear</button>
         </div>
      </div>
   </li>
   <li> 
   <li><a href="#">Action</a></li>
   </li>
</ul>
<!-- End Of Example -->

示例 2