Question

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

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

Answer 1

您可以继续使用此CSS选择器来移除使您不对齐的边距：

.pagination {
  margin:0;
}

当然，您需要将该选择器范围限定为包装ID或类，这样您就不会覆盖所有.pagination元素。

这是一个CodePen，供您查看正在进行的操作。

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

如果您有任何疑问，请与我联系！

匹配Bootstrap分页元素的高度与兄弟元素

1 个答案: