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

您可以添加另一个类或内联样式定义，以将分页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>

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

1 个答案: