Bootstrap - align-Taste auf der Unterseite der Karte

War ich spähen in einem der Bootstrap-Beispiele für die card-deck und card Klassen (Pricing B.). Ich fragte mich, wie kann man fix die Schaltfläche Ausrichtung, wenn Sie eine der Listen, hat weniger Elemente als die anderen.

Bootstrap - align-Taste auf der Unterseite der Karte

Ich würde gerne alle Tasten, um vertikal ausgerichtet sein (am unteren Rand jeder Karte) aber ich konnte nicht herausfinden, ein Weg, dies zu tun. Ich habe versucht, die .align-bottom - Klasse, sowie das einwickeln der Schaltfläche in <div class="align-text-bottom">. Ich habe auch versucht, mehrere Vorschläge von diese Frage über das hinzufügen von Raum jedoch noch keinen Erfolg (auch der Abstand sollte variabel sein, so dass es füllt den restlichen Raum aus der Liste).

Einwickeln in <div class="card-footer-bg-white"> hat nicht das gewünschte Ergebnis erzielt wurde entweder, wie es nicht richten Sie die Taste auf der Unterseite der Karte und es entsteht eine Art Rahmen um ihn.

Hat jemand eine Idee?

Edit: Hier ist ein jsfiddle , ähnelt das problem.

Sie können immer position, die Sie als absolute, bottom:0, margin:0 auto mit Ihren übergeordneten Satz als position: relative
Ich habe versucht style="margin-top: auto;" aber das ändert nicht die situation. Der Knopf sitzt genau da, wo es vorher war. Siehe Geige.

InformationsquelleAutor a_guest | 2018-01-23

  1. 58

    aktualisiert basierend auf Zusatz von jsfiddle link

    Können Sie die folgende Bootstrap-4 modifier-Klassen:

    1. Hinzufügen d-flex zu .card-body
    2. Hinzufügen flex-column zu .card-body
    3. Hinzufügen mt-auto zu .btn verschachtelt .card-body

    aktualisiert fiddle

    Finden auf dieser Seite für eine vollständige Liste der flexbox-ändern von Klassen für die Bootstrap-4.

    InformationsquelleAutor sol

  2. 6

    Eine ähnliche Frage wurde hier beantwortet.

    Fügen Sie einfach die align-self-end Klasse Element ausrichten an der Unterseite.

    https://www.codeply.com/go/Fiorqv1Iz6

         <div class="card-body d-flex flex-column">
            <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/mo</small></h1>
            <ul class="list-unstyled mt-3 mb-4">
              <li>20 users included</li>
              <li>10 GB of storage</li>
            </ul>
            <button type="button" class="align-self-end btn btn-lg btn-block btn-primary" style="margin-top: auto;">Get started</button>
     </div>

    Standardmäßig die card display:flex, aber die card-body ist nicht. Aus diesem Grund müssen Sie hinzufügen d-flex flex-column zu den card-body. Dadurch wird die flexbox-Ausrichtung-Klassen arbeiten.

    Andere Möglichkeit ist die Verwendung mt-auto (auto-top-margin) auf die Taste schieben Sie es auf der Unterseite der Karte.

    InformationsquelleAutor Zim

  3. 0

    Müssen Sie hinzufügen:

    <div class="card-footer">
<button type="button" class="btn btn-primary btn-sm btn-block" onclick="location.href = '';">BUY NOW </button>
</div>

    InformationsquelleAutor Pedro GM

Schreibe einen Kommentar