Bootstrap 4 列居中分页

Question

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

我想仅使用现有的Bootstrap类w/o任何额外的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

Answer 1

我使用 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 class 可用于“分页”UL。

Answer 2

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

.pagination {
   justify-content: center;
}

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

Answer 3

在.paginationul上使用class.justify-content-center。

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

Answer 4

Bootstrap4

的解决方案

你可以用它对齐用这个classjustify-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>

Bootstrap 4 列居中分页

Bootstrap 4 Center Pagination in Column

css

twitter-bootstrap

flexbox

bootstrap-4

twitter-bootstrap-4