对齐按钮到底部

Question

我使用表单，标签显示在输入上。 如何将按钮对齐按钮？

<form role="form"> 
    <div class="form-group"> 
     <div class="col-xs-1"> 
     <label for="searchLodgerNumber">Numéro</label> 
     <input type="text" class="form-control" placeholder="Numéro, 2 caractère" name="searchLodgerNumber" id="searchLodgerNumber"> 
     </div> 
     <div class="col-xs-2"> 
     <label for="searchLodgerLastName">Nom</label> 
     <input type="text" class="form-control" placeholder="Nom, min 2 caractère" name="searchLodgerLastName" id="searchLodgerLastName"> 
     </div> 
    </div> 
    <div class="input-group-btn"> 
     <button id="lodgerSearch" type="button" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button> 
    </div> 
    </form> 
</form> 

我在这里创造一个演示修改后的小提琴 https://jsfiddle.net/6wavvbxx/1/

的

只是检查编辑

我搜索得到

Answer 1

试试这个，我重新结构化的HTML类有点与按钮：

小提琴：Fiddle

<div class="col-xs-1"> 
    <div class="spacer"></div> 
    <button type="submit" class="btn btn-default"> 
     <i class="glyphicon glyphicon-search"></i> 
    </button> 
    </div> 

自定义CSS：

.spacer{ 
    margin-bottom:23px; 
}