Bootstrap 3 - Untere Ausrichtung der Spalte innerhalb der Zeile

Versuchen Sie es mit position: absolute; und einem bottom von 0 :

Ссылка

Obwohl die absolute Position eine schnelle Lösung ist, wäre eine robustere Lösung, die mit vielen Spalten arbeitet, viel besser.

Hier ist meine Lösung in dieser aktualisierten Geige .

und html:

In meiner Lösung sind einige Dinge zu beachten. Die verwendete Inline-Block-Strategie ermöglicht das Positionieren der div-Spalten, um im Dokumentenfluss zu bleiben, und ermöglicht auch die Verwendung von vertikal ausgerichtetem Styling. Ich habe einen Stil für die untere Ausrichtung und mittlere Ausrichtung für Ihre Bequemlichkeit hinzugefügt (ich neige dazu, die mittlere Ausrichtung genauso oft zu verwenden).

Als zweites müssen Sie beachten, dass Sie müssen jeweils die Endspalte </div> und die Startspalte <div> mit nein dazwischen treffen müssen. Dies liegt daran, dass der Inline-Block jedem Zeichen (einschließlich Leerzeichen) 'Leerzeichen' gibt. Im Wesentlichen ist dies darauf zurückzuführen, dass ein Leerzeichen eine bestimmte Schriftgröße hat und am Ende die jeweils am weitesten rechts liegenden Spalten unter die Spalten ganz links drückt. Es gibt Hacks, um dies zu überwinden, aber sie sind beachten Cross-Browser-kompatibel, also habe ich sie nicht aufgenommen. Daher ist meine Lösung hack-free und arbeitet mit mehreren Spalten. Viel Spaß!

Aufbauend auf Mikes Lösung, hier ist eine, die sich nicht um Leerzeichen zwischen divs kümmert. Anstatt inline verwendet es display: table und display: cell.

ploker aktualisiert: Ссылка

Indem wir auf Lösungen von Mike und JPH aufbauen, können wir Col-12-Verhalten beibehalten. Es ist nicht perfekt und ein bisschen im einfachen CSS, aber funktioniert.

Ich weiß, dass ich auf einem sehr alten Thread poste, aber ich habe nach Lösungen für dasselbe Problem gesucht. Ich denke eine einfache Lösung könnte sein, display: flex; in der Zeile und margin-top: auto; in der Spalte zu verwenden, die Sie nach unten schieben möchten. Hier ist eine Demo-Geige basierend auf dem OP.

* Bitte beachten * - Dies ändert die row -Klasse, die unbeabsichtigte Nebenwirkungen haben könnte. Möglicherweise möchten Sie es in einer neuen Klasse implementieren und nur dort anwenden, wo es benötigt wird.