Bootstrap 3 вертикальное выравнивание и другие элементы

Question

Использование bootstrap 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

Вы можете добавить другое определение стиля класса или встроенного стиля, чтобы вертикально выровнять pagination 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>