Bootstrap 4 栏中的居中分页

Question

我正在使用Bootstrap 4，尝试在网格列内水平居中一个pagination UL。现在pagination已经设置为display:flex，但我无法使其正确居中。

我希望只使用现有的Bootstrap类而不需要任何额外的CSS来使其居中。

我尝试过使用text-center、mx-auto和align-items-center，但都无法正常工作。

<div class="container">
    <div class="row">
        <div class="col-lg-6 offset-lg-3 py-5 border">
            <ul class="pagination mx-auto">
                <li class="page-item disabled">
                    <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true">«</span>
                        <span class="sr-only">Previous</span>
                    </a>
                </li>
                <li class="page-item active">
                    <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="#">4</a></li>
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">»</span>
                        <span class="sr-only">Next</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

这里是代码示例

- Zim

Answer 1

只需在 .pagination 类中添加 justify-content: center; 即可。

.pagination {
   justify-content: center;
}

这里是可运行的代码：https://jsfiddle.net/r9z25u06/

- Mukesh Ram

---

欢迎。如果答案对您有帮助，请接受答案。谢谢 :) - Mukesh Ram

只需在.pagination的ul元素上使用类名.justify-content-center即可。 - kjdion84

对于那些使用编译后的SASS Bootstrap4的人，我只是将上述代码添加到我的custom.scss中以解决问题，然后重新编译即可。 - user1204214

Answer 2

在.pagination ul上使用.justify-content-center类。

例如：<ul class="pagination justify-content-center">

- kjdion84

---

谢谢！不确定为什么像 text-center 这样的类在这里不起作用。另外，没有 justify-content-right 或 justify-content-left 吗？ - Jonathan Wood

justify-content-start 和 justify-content-end。 - stardust4891

Answer 3

我使用d-flex将列更改为display:flex，现在可以使用mx-auto来居中分页的UL...

这样可以不用额外的CSS就能运行

<div class="container">
    <div class="row">
        <div class="col-lg-6 offset-lg-3 py-5 border d-flex">
            <ul class="pagination mx-auto">
                <li class="page-item disabled">
                    <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true">«</span>
                        <span class="sr-only">Previous</span>
                    </a>
                </li>
                <li class="page-item active">
                    <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="#">4</a></li>
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">»</span>
                        <span class="sr-only">Next</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

http://www.codeply.com/go/JQKwUW2Tjg

或者，也可以在“pagination” UL中使用“justify-content-center”类。

- Zim

Answer 4

Bootstrap 4 解决方案：

您可以使用 justify-content-center 类来调整 对齐方式。

使用 flexbox 工具类 更改分页组件的对齐方式。

了解更多信息，请参考 pagination 分页。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">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>

- core114