css - Bootstrap 输入组和按钮对齐

Question

我希望输入组按原样向左对齐，并且“添加新”按钮与行的右侧对齐。

<div class="row">
  <div class="input-group col-sm-6">        
    <input type="text" class="form-control" placeholder="Search by a substring in good's name.."></input>
    <span class="input-group-btn">
      <button class="btn btn-default" type="button" onclick="filter()">Search</button>
    </span>
  </div>

  <div class="col-sm-6">          
    <button class="btn btn-default text-right" type="button" onclick="addNew()">Add new</button>
  </div>
</div>

在行动中:Bootply

如您所见，输入组和“添加新”按钮垂直堆叠，尽管它们在一行中。

Answer 1

<div class="row">
    <div class="col-lg-6">
        <div class="input-group">        
          <input type="text" class="form-control" placeholder="Search by a substring in good's name..">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button" onclick="filter()">Search</button> 
          </span>
        </div>
  </div>  

        <div class="col-lg-6">          
          <button class="btn btn-default" type="button" onclick="addNew()">Add new</button>
        </div>
      </div>

将 col-lg-6 和 input-group 从 div 中分离出来

Bootstrap :http://www.bootply.com/W8ao9A0a4r