如何在 Bootstrap 4 中对齐分页？

在 Bootstrap 4 中，对齐分页可以通过几种方式实现。下面将介绍其中的两种常用方法，并提供相应的代码片段。

方法一：使用 justify-content-end 类

可以在分页的 parent 元素上添加 d-flex 和 justify-content-end 类，使分页组件右对齐。具体代码如下：

<nav class="d-flex justify-content-end">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#">Previous</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">1</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">3</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

其中，d-flex 类将 nav 元素变为 Flexbox 容器，justify-content-end 类使分页组件右对齐。

方法二：使用 ml-auto 辅助类

另一种对齐分页的方法是，在最后一个分页元素上添加 ml-auto 辅助类，具体代码如下：

<nav>
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#">Previous</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">1</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">3</a>
    </li>
    <li class="page-item ml-auto">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

其中，ml-auto 辅助类将最后一个分页元素向右对齐。

以上两种方法都可以达到对齐分页的效果，可以根据具体情况选择适合的方法。

**注意：**以上两种方法都需要添加 nav 元素或类似容器元素，否则分页组件无法水平对齐。