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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我将列更改为 display:flex 使用 d-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

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

原文由 Zim 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 --- .pagination .justify-content-center ul 。

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

原文由 kjdion84 发布，翻译遵循 CC BY-SA 3.0 许可协议