Bootstrap上div在row里高低不同，有空隙问题。

Question

这是我的代码，因为都在一行的row。但是感觉这俩不在一个水平线上，按钮高，分页明显低一点。

这是图。

这是代码。

<div class="row" style="margin-top:50px;padding-bottom:50px;">
  <div class="col-md-1"></div>
    <div class="col-md-1">
      <button type="button" class="btn btn-primary">按钮</button>
    </div>
    <div class="col-md-3 col-md-offset-6">
      <ul class="pagination" style="display:inline-block;">
        <li ><a href="#">前</a></li>
        <li class="active"><a href="#">1</a></li>
        <li class="disabled"><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">次</a></li>
      </ul>
    </div>
  <div class="col-md-1"></div>
</div>

Answer 1

是因为bootstrap.min.css的.pagination的margin: 20px 0;
你自己再写个样式，把它的margin覆盖掉就好了,
点击查看demo

这个demo直接预览分页换行了，可能宽度太小了，放不下，打开个新页面查看demo比较好

Answer 2

你的row的div改一下布局？

div.row {
  display: flex;
  align-items: center;
}

Answer 3

ul标签用了inline-block，需要用vertical-align或定位position来调一下