如何让上一页、下一页按钮分别左右对齐并处于同一行？

你当前的代码将两个按钮分别放在了独占整行的col-md-12容器中，所以会自动换行展示。你可以用Bootstrap内置的弹性布局类快速实现同排左右分布的效果，无需额外编写自定义CSS。

弹性布局最优方案 #

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="col-md-12 d-flex justify-content-between align-items-center">
  <button type="button" id="pre_button" class="btn btn-md btn-primary button-icon rounded-small" data-toggle="tooltip" data-placement="top" title="previous">Previous</button>
  <button type="button" id="next_button" class="btn btn-md btn-primary button-icon rounded-small" data-toggle="tooltip" data-placement="top" title="Next">Next</button>
</div>

代码说明：

• d-flex将父容器设置为弹性布局，子元素默认在同一行排列
• justify-content-between会自动将两个按钮分别对齐到容器的最左侧和最右侧，匹配你要的左Previous右Next的分布效果
• align-items-center保证两个按钮垂直方向居中对齐

可选栅格实现方案 #

如果更习惯使用Bootstrap栅格系统，也可以按如下写法实现：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row">
  <div class="col-6 text-left">
    <button type="button" id="pre_button" class="btn btn-md btn-primary ml-2 button-icon rounded-small" data-toggle="tooltip" data-placement="top" title="previous">Previous</button>
  </div>
  <div class="col-6 text-right">
    <button type="button" id="next_button" class="btn btn-md btn-primary mr-2 button-icon rounded-small" data-toggle="tooltip" data-placement="top" title="Next">Next</button>
  </div>
</div>

代码说明：将两个按钮放在同一行row容器内，各占50%宽度，分别设置左对齐和右对齐即可实现同排分布效果。

内容的提问来源于stack exchange，提问作者nonutt