以引导程序为中心

Question

我有这个代码的分页

<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保持一致.有没有办法让ulwrt 居中div？

我试着margin: auto auto和margin :0 auto他们,但没有奏效.

Answer 1

Bootstrap添加了一个3.0的新类.

<div class="text-center">
    <ul class="pagination">
        <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>

Bootstrap 4有新课程

<div class="text-xs-center">
    <ul class="pagination">
        <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>

对于2.3.2

<div class="pagination text-center">
    <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>

这样:

.pagination {text-align: center;}

它的工作原理是因为ul使用inline-block;

小提琴:http://jsfiddle.net/praveenscience/5L8fu/

或者如果你想使用Bootstrap的类:

<div class="pagination pagination-centered">
    <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>

小提琴:http://jsfiddle.net/praveenscience/5L8fu/1/

Answer 2

对于Bootstrap 3.0和2.3.2,以中心分页,.text-center类可以应用于包含div.

注意:在标记中应用.pagination类的位置在Bootstrap 2.3.2和3.0之间发生了变化.请参阅下文,或阅读分页上的Bootstrap文档:Bootstrap 3.0,Bootstrap 2.3.2.

Bootstrap 3示例

<div class="text-center">
    <ul class="pagination">
        <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>

http://jsfiddle.net/mynameiswilson/eYNMu/

Bootstrap 2.3.2示例

<div class="pagination text-center">
    <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>

http://jsfiddle.net/mynameiswilson/84X3M/

Answer 3

要集中在BS4分页,应该添加justify-content-center在ul:

<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>

有关详细信息,请参阅分页引导程序4.

Answer 4

结合使用laravel和bootstrap 4，有效的解决方案是：

            <div class="d-flex">
                <div class="mx-auto">
                    {{$products->links("pagination::bootstrap-4")}}
                </div>
            </div>

Answer 5

Bootstrap 4的解决方案

您可以使用它 Alignment 使用此类justify-content-center

使用flexbox实用程序更改分页组件的对齐方式。

并详细了解它的分页

<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>

Answer 6

这个，它对我有用：

风格：

.pagination {
  display: flex;
  justify-content: center;
}

.pagination li {
  display: block;
 }

和刀片：

<div class="pagination">                                              
  {{ $myCollection->render() }}
</div>

Answer 7

前面提到的Bootstrap 3.0解决方案在3.1.1上对我不起作用.分页类具有display:block,并且<li>元素具有float:left,这意味着仅单独包装<ul>in 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属性并将其放在样式表中:

<style>
    .pagination {
        display: inline-block;
    }
</style>

然后使用之前建议的标记:

<div class="text-center">
    <ul class="pagination">
        <li><a href="...">...</a></li>
    </ul>
</div>

Answer 8

您可以添加自定义CSS：

.pagination{
    display:table;
    margin:0 auto;
}

谢谢