Bootstrap-4 Center Seitenumbruch in Spalte

Ich bin mit Bootstrap 4 und dem Versuch, eine horizontal-center ein pagination UL innerhalb einer grid-Spalte. Nun, dass die pagination ist display:flex ich nicht bekommen kann es richtig zu zentrieren.

Möchte ich verwenden nur bestehende Bootstrap-Klassen w/o irgendwelche zusätzliche CSS um es zentriert.

Habe ich versucht, mit text-center, mx-auto, align-items-center 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 die Code-Beispiel

InformationsquelleAutor Zim | 2017-04-28

  1. 33

    Fügen Sie einfach justify-content: center; im .pagination Klasse

    .pagination {
   justify-content: center;
}

    Hier arbeitet-code: https://jsfiddle.net/r9z25u06/

    Willkommen.. wenn die Antwort half Sie dann akzeptieren Sie bitte die Antwort.. vielen Dank 🙂
    Oder verwenden Sie einfach die Klasse .justify-content-center auf die .pagination ul.
    für diejenigen, die sich mit kompiliert SASS bootstrap4 ich buchstäblich nur ergänzt den oben genannten code in meiner custom.scss um das problem zu beheben und dann neu kompiliert

    InformationsquelleAutor Mukesh Ram

  2. 13

    Verwenden Sie die Klasse .justify-content-center auf die .pagination ul.

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

    InformationsquelleAutor kjdion84

  3. 12

    Änderte ich die Spalte zur Anzeige:flex mit d-flex und jetzt mx-auto arbeitet, um die Mitte der pagination UL...

    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

    Abwechselnd, die justify-content-center Klasse kann verwendet werden, in der 'Paginierung` UL.

    InformationsquelleAutor Zim

Schreibe einen Kommentar