我在分页中有这段代码
<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
,但它们都不起作用。
发布于 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。
发布于 2018-07-07 17:17:54
使用laravel和bootstrap 4,有效的解决方案是:
<div class="d-flex">
<div class="mx-auto">
{{$products->links("pagination::bootstrap-4")}}
</div>
</div>
发布于 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>
https://stackoverflow.com/questions/15265253
复制相似问题