在bootstrap中将分页居中
在bootstrap中将分页居中
提问于 2013-03-07 15:17:39
我在分页中有这段代码
<div class="pagination">
<ul>
<li><a href="?p=0" data-original-title="" title="">1</a></li>
<li><a href="?p=1" data-original-title="" title="">2</a></li>
</ul>
</div>但是我的ul是左对齐的。有没有办法使ul wrt div居中
我尝试了margin: auto auto和margin :0 auto，但它们都不起作用。
回答 10
Stack Overflow用户
发布于 2017-04-27 22:39:35
要使BS4中的分页居中，应在ul中添加justify-content-center
<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>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
有关详细信息，请参阅Pagination Bootstrap 4。
Stack Overflow用户
发布于 2018-07-07 17:17:54
使用laravel和bootstrap 4，有效的解决方案是：
<div class="d-flex">
<div class="mx-auto">
{{$products->links("pagination::bootstrap-4")}}
</div>
</div>Stack Overflow用户
发布于 2014-08-14 22:41:05
前面提到的Bootstrap 3.0的解决方案在3.1.1上不适用于我。分页类具有display:block，而<li>元素具有float:left，这意味着仅将<ul>包装在text-center中是不起作用的。我不知道3.0和3.1.1之间的变化是如何发生的，什么时候发生的。无论如何，我让<ul>改用display:inline-block。代码如下：
<div class="text-center">
<ul class="pagination" style="display: inline-block">
<li><a href="...">...</a></li>
</ul>
</div>或者，对于更简洁的设置，可以省略style属性并将其放入样式表中：
.pagination {
display: inline-block;
}然后使用前面建议的标记：
<div class="text-center">
<ul class="pagination">
<li><a href="...">...</a></li>
</ul>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15265253
复制相关文章
相似问题