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>

宣布来自div的col-lg-6和input-group

Bootply：http://www.bootply.com/W8ao9A0a4r

Answer 2

见下文。我在搜索按钮旁边移动了添加新按钮代码。输入位于左侧，添加新按钮位于右侧。如果您想要添加新按钮来拥抱浏览器的右侧，请告诉我。

<div class="actions row">
        <div class="input-group col-sm-6">        
          <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 class="col-sm-6">          
          <button class="btn btn-default text-right" type="button" style="float:right; margin-right:-15px;" onclick="addNew()">Add new</button>
        </div>
      </div>

Bootstrap输入组和按钮对齐

2 个答案: