Bootstrap 3垂直对齐分页和其他元素

Question

使用引导3我试图垂直对齐分页与其他元素没有成功。

<div class="row"> 
    <div class="col-md-12"> 
    <ul class="pagination pagination-sm"> 
     <li><a href="#">1</a></li> 
     <li><a href="#">2</a></li> 
     <li><a href="#">3</a></li> 
     <li><a href="#">4</a></li> 
     <li><a href="#">5</a></li> 
    </ul> 
    <div class="search form-group"> 
     <div class="input-group input-group-sm"> 
     <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span> 
     <input class="form-control" placeholder="Cerca.." id="searchText" type="text"> 
     </div> 
    </div> 
    <button type="button" class="btn btn-default btn-sm" id="refresh"> 
     <span class="glyphicon glyphicon-refresh"></span> 
    </button> 
    <button type="button" class="btn btn-default btn-sm" id="resetAll"> 
     <span class="glyphicon glyphicon-remove"></span> 
    </button> 
    </div> 
</div> 

CSS

.pagination { 
    margin: 0px !important; 
} 

.search { 
    display: inline-block; 
    margin: 0; 
    vertical-align: middle; 
    width: 180px; 
} 

Bootply

我怎么能这样做？谢谢

Answer 1

你可以添加另一个类或内联样式定义来将分页ul垂直对齐到顶端。

<div class="row"> 
    <div class="col-md-12"> 
    <ul class="pagination pagination-sm" style="vertical-align:top"> 
     <li><a href="#">1</a></li> 
     <li><a href="#">2</a></li> 
     <li><a href="#">3</a></li> 
     <li><a href="#">4</a></li> 
     <li><a href="#">5</a></li> 
    </ul> 
    <div class="search form-group"> 
     <div class="input-group input-group-sm"> 
     <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span> 
     <input type="text" class="form-control" placeholder="Cerca.." id="searchText"> 
     </div> 
    </div> 
    <button type="button" class="btn btn-default btn-sm" id="refresh"> 
     <span class="glyphicon glyphicon-refresh"></span> 
    </button> 
    <button type="button" class="btn btn-default btn-sm" id="resetAll"> 
     <span class="glyphicon glyphicon-remove"></span> 
    </button> 
    </div> 
</div>