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>

以下是Code example

Answer 1

只需在justify-content: center;类

中添加.pagination即可

.pagination {
   justify-content: center;
}

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

Answer 2

使用.justify-content-center .pagination上的课程ul。

e.g。 <ul class="pagination justify-content-center">

Answer 3

我将列更改为显示：使用public void MergeResourceDictionary(Uri uriResource) { var newResource = new ResourceDictionary {Source = uriResource}; Resources.MergedDictionaries.Add(newResource); }进行展示，现在d-flex可以使分页UL居中...

无需额外的CSS

mx-auto

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

或者，<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>类可用于'分页`UL。

Answer 4

引导程序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>

列中的Bootstrap 4中心分页

4 个答案: