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

【问题标题】：Bootstrap 3 vertical-align pagination and other elementsBootstrap 3 垂直对齐分页和其他元素
【发布时间】：2015-07-21 18:23:39
【问题描述】：

使用 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

我该怎么办？谢谢

【问题讨论】：

标签： twitter-bootstrap pagination

【解决方案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>

【讨论】：