html - Bootstrap 3 中的内联输入问题

Question

我无法找到一种可靠的方法来使两个输入内联显示在 this example 中:

<div class="row">
  <div class="col-md-8">
    <h3>Things</h3>
  </div>
  <div class="col-md-4">
    <form class="form-inline" role="form">
      <div class="input-group">
        <input type="search" class="form-control" placeholder="Search" />
        <span class="input-group-btn">
          <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
        </span>
      </div>
    </form>
    <a class="btn btn-primary pull-right" href="#/things/new">Add Thing</a>
  </div>
</div>

当我将输入周围的 div 类设置为 form-group(应该如此)时，搜索输入不再正确。

我可以通过将输入放在不同的网格列中来修复它，但它们无法正确对齐。我希望它们彼此相邻并右对齐，并且我希望它们与左侧的 h3 标签垂直对齐。

Answer 1

样本:http://jsbin.com/IRUciJe/1/

带有响应表:http://jsbin.com/IRUciJe/2/edit

<div class="row" role="search-row">
  <div class="col-xs-12 col-sm-5 col-md-5">
   <h3>Things</h3>
  </div>
  <div class="col-xs-12 col-sm-7 col-md-7">
   <form class="form-inline float-right" role="form">
    <div class="form-group">

     <!-- <input type="search" class="form-control" placeholder="Search + Enter" />-->

     <div class="input-group">
      <input type="search" class="form-control" placeholder="Search" />
      <span class="input-group-btn">
      <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
      </span>
     </div>
    </div>
    <!--/.form-group--> 

    <a class="btn btn-primary" href="#">Add Thing</a>
  </form>
  </div>
  <!--/.col-md-8-->

 </div>
 <!--/.row role=search-row-->

CSS

body { padding-top: 80px; }
hr.empty {margin:0 0 3% 0;border:0;}
div[role=search-row] h3 {margin:0 0 2%}

@media (min-width: 768px) {
div[role=search-row]  .float-right {float:right}
}