引导分页元素与同级元素的匹配高度

Question

我正在使用.container-fluid .row .col-*-*结构内的Bootstrap的.pagination类：

<div class="container-fluid" style="border: 1px solid black">
  <div class="row">
    <div class="col-xs-6" style="border: 1px solid red">
      <nav>
        <ul class="pagination">
          <li>
            <a href="#" aria-label="Previous">
              <span aria-hidden="true">«</span>
            </a>
          </li>
          <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>
          <li>
            <a href="#" aria-label="Next">
              <span aria-hidden="true">»</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="col-xs-6" style="vertical-align:middle; border: 1px solid red">
      <div class="input-group">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <input class="form-control" aria-label="..." type="text">
      </div><!-- /input-group -->
    </div>
  </div>
</div>

问题在于.pagination元素旁边的.pagination .input-group的对齐方式。 注意，分页元素比.input-group占用更多的垂直空间，因此.input-group笨拙地浮动在其上方和右侧。 我尝试将style="vertical-algin:middle"到几个不同的位置，例如.container-fluid <div>以及每个.row和.col-*-* <div> ，但是没有运气修复它。

Answer 1

您可以继续，只需使用此CSS选择器即可删除使您无法对齐的边距：

.pagination {
  margin:0;
}

自然，您将需要将该选择器的作用域.pagination为包装ID或类，以免覆盖所有.pagination元素。

这是一个CodePen，供您查看发生了什么。

http://codepen.io/stat30fbliss/pen/gbEYXx

如果您有任何疑问，请告诉我！