列中的Bootstrap 4中心分页 [英] Bootstrap 4 Center Pagination in Column

问题描述

我正在使用Bootstrap 4，并尝试将pagination UL在网格列内水平居中.现在pagination是display:flex，我无法使其正确居中.

I'm using Bootstrap 4 and attempting to horizontally center a pagination UL inside a grid column. Now that the pagination is display:flex I can't get it to properly center.

我想仅使用 现有的Bootstrap类，而无需使用任何其他CSS以使其居中.

I would like to use only existing Bootstrap classes w/o any additional CSS to get it centered.

我尝试使用text-center，mx-auto，align-items-center，但似乎无济于事.

I have tried using text-center, mx-auto, align-items-center but nothing seems to work.

<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>

这是代码示例

推荐答案

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

I changed the column to display:flex using d-flex and now mx-auto works to center the pagination 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中使用.

Alternately, the justify-content-center class can be used in the 'pagination` UL.

这篇关于列中的Bootstrap 4中心分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！