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

Question

我在 .container-fluid .row .col-*-* 结构中使用 Bootstrap 的 .pagination class：

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

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

Answer 1

您可以继续，只需使用这个 CSS 选择器来删除让您不对齐的边距：

.pagination {
  margin:0;
}

自然地，您会希望将该选择器的范围限定为包装 ID 或 class，这样您就不会覆盖所有 .pagination 元素。

这里有一个CodePen，你可以看看是怎么回事。

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

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

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

Matching Height of Bootstrap Pagination Element with Sibling Element

html

css

twitter-bootstrap

twitter-bootstrap-3