bootstrap 4 richten Sie die Schaltflächen in der Mitte

im ein wenig stecken, wie center richten Sie eine Schaltfläche der Gruppe i haben:

<section>
  <div class="d-inline mx-auto">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>

Ich habe versucht, hinzuzufügen, d-inline-und mx-auto, aber es funktioniert nicht. Ich bin noch nicht vertraut mit der Bibliothek, so könnte jemand bitte zeigen Sie mich in die richtige Richtung?

InformationsquelleAutor Strahinja Ajvaz | 2017-10-14

  1. 2

    fügen Sie die 2-Klassen - mx-auto d-block auf die Schaltfläche

    <button class="btn btn-primary mx-auto d-block">My Button</button>

    dieser arbeitete für mich, wenn der button war in eine-Karte-body-div.

    Arbeitete für mich in einem nicht-Karte-body-div als gut. Danke.

    InformationsquelleAutor Sylvia

  2. 0

    Andere Weise auch versuchen, auf das parent-element text-align: center
    Beispiel:

    .center { text-align: center; }

    VERSUCHEN, DIESE CSS - 

    <section>
    <div class="center">
        <a class="btn btn-outline-primary" href="#">Home</a>
        <a class="btn btn-outline-primary" href="#">Traffic</a>
        <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
        <a class="btn btn-outline-primary" href="#">Alert Logging</a>
        <a class="btn btn-outline-primary" href="#">Diameter Server</a>
        <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
     </div>
</section>

    InformationsquelleAutor Md. Abu Sayed

  3. 0

    Einfachen Weg, das zu tun:
    nur hinzufügen: style="margin-left: 45%;"

    <section>
  <div class="d-inline mx-auto" style="margin-left: 45%;">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>

    InformationsquelleAutor Maijied Hasan Shuvo

Schreibe einen Kommentar