Bootstrap 4 列中的中心分页

Posted 2023-03-06

【中文标题】Bootstrap 4 列中的中心分页

【英文标题】：Bootstrap 4 Center Pagination in Column

【发布时间】：2017-09-26 12:43:32

【问题描述】：

我正在使用 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>

这里是Code example

【参考方案1】：

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

.pagination 
   justify-content: center;

这是工作代码：https://jsfiddle.net/r9z25u06/

【讨论】：

欢迎..如果答案对您有帮助，请接受答案..谢谢:)

或者只使用 .pagination ul 上的 .justify-content-center 类。

对于那些使用已编译的 SASS bootstrap4 的人，我实际上只是将上述代码添加到我的 custom.scss 中以解决问题，然后重新编译

【参考方案2】：

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

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

【讨论】：

谢谢！不知道为什么 text-center 这样的类在这里不起作用。还有，没有justify-content-right或者justify-content-left吗？

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

【参考方案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

或者，justify-content-center 类可用于“分页”UL。

【参考方案4】：

Bootstrap 4

的解决方案

可以使用Alignment使用这个类justify-content-center

用flexbox utilities改变分页组件的对齐方式。

并了解更多信息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>