webentwicklung-frage-antwort-db.com.de

Bootstrap 4 Center Pagination in Column

Ich verwende Bootstrap 4 und versuche, einen pagination-UL innerhalb einer Rastersäule horizontal zu zentrieren. Nun, da paginationdisplay:flex ist, kann ich es nicht richtig zentrieren.

Ich möchte use only vorhandene Bootstrap-Klassen ohne zusätzliches CSS verwenden, um sie zu zentrieren.

Ich habe versucht, text-center, mx-auto, align-items-center zu verwenden, aber nichts scheint zu funktionieren.

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

Hier ist das Code Beispiel

csstwitter-bootstrapflexboxbootstrap-4twitter-bootstrap-4
8
Zim

Ich habe die Spalte geändert, um anzuzeigen: flex mit d-flex und jetzt funktioniert mx-auto, um die Paginierung von UL zu zentrieren ...

Dies funktioniert ohne extra 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

Alternativ kann die justify-content-center-Klasse in der "Paginierung" -Ul verwendet werden.

12
Zim

Fügen Sie einfach justify-content: center; in der .pagination-Klasse hinzu

.pagination {
   justify-content: center;
}

Hier ist der Arbeitscode: https://jsfiddle.net/r9z25u06/

29
Mukesh Ram

Verwenden Sie die Klasse .justify-content-center für die .paginationul.

z.B. <ul class="pagination justify-content-center">

12
kjdion84

lösung für Bootstrap 4

Sie können es verwenden Alignment Diese Klasse verwenden justify-content-center

Ändern Sie die Ausrichtung von Paginierungskomponenten mit den Dienstprogrammen flexbox .

und erfahren Sie mehr darüber Paginierung

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

2
core114