CSS 列中的 Bootstrap 4 中心分页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43679491/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 Center Pagination in Column
提问by Zim
I'm using Bootstrap 4 and attempting to horizontally center a paginationUL inside a grid column. Now that the paginationis display:flexI can't get it to properly center.
我正在使用 Bootstrap 4 并尝试pagination在网格列内水平居中UL。现在pagination是display:flex我无法让它正确居中。
I would like to use onlyexisting Bootstrap classesw/o any additional CSS to get it centered.
我想用只有现有的自举类W / O任何额外的CSS得到它为中心。
I have tried using text-center, mx-auto, align-items-centerbut nothing seems to work.
我尝试使用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>
Here is the Code example
这是代码示例
回答by Mukesh Ram
Just add justify-content: center;in .paginationclass
只需justify-content: center;在.pagination课堂上添加
.pagination {
justify-content: center;
}
Here is working code: https://jsfiddle.net/r9z25u06/
这是工作代码：https: //jsfiddle.net/r9z25u06/
回答by kjdion84
Use the class .justify-content-centeron the .paginationul.
使用类.justify-content-center的.paginationul。
e.g. <ul class="pagination justify-content-center">
例如 <ul class="pagination justify-content-center">
回答by Zim
I changed the column to display:flex using d-flexand now mx-autoworks to center the pagination UL...
我将列更改为 display:flex using d-flex，现在mx-auto可以将分页 UL 居中...
This works without extra CSS
这无需额外的 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
http://www.codeply.com/go/JQKwUW2Tjg
Alternately, the justify-content-centerclass can be used in the 'pagination` UL.
或者，justify-content-center该类可以在“分页”UL 中使用。
回答by core114
solution for Bootstrap 4
Bootstrap 4 的解决方案
You can use it Alignmentuse this class justify-content-center
你可以使用它Alignment使用这个类justify-content-center
Change the alignment of pagination components with flexbox utilities.
使用flexbox 实用程序更改分页组件的对齐方式。
and learn more about it 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>