Vertical-align mit Bootstrap 3

Question

Ich verwende Twitter Bootstrap 3 und habe Probleme, wenn ich zwei div vertikal ausrichten möchte, zum Beispiel - JSFiddle link:

    Big

    Small

Das Rastersystem in Bootstrap verwendet float: left, nicht display:inline-block, daher funktioniert die Eigenschaft vertical-align nicht. Ich habe versucht, margin-top zu verwenden, um es zu beheben, aber ich denke, dass dies keine gute Lösung für das responsive Design ist.

Answer 1

Versuchen Sie das

    ...

Answer 2

Mit Bootstrap 4 (das derzeit in der Alpha-Phase ist) können Sie die Klasse .align-items-center verwenden. Dadurch können Sie den responsiven Charakter von Bootstrap beibehalten. Funktioniert für mich sofort einwandfrei. Siehe Bootstrap 4 Dokumentation.

Answer 3

HTML

CSS

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}

Answer 4

Ich habe viel Zeit damit verbracht, Lösungen von hier zu versuchen, aber keines hat mir geholfen. Nach ein paar Stunden glaube ich, dass dies es Ihnen ermöglichen wird, jedes Kind-Element in BS3 vertikal zu zentrieren.

CSS

.vertical-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

HTML

Answer 5

Ich bin auf die gleiche Situation gestoßen, in der ich ein paar div-Elemente vertikal in einer Reihe ausrichten wollte und festgestellt habe, dass die Bootstrap-Klassen col-xx-xx das Style auf das div als float: left anwenden.

Ich musste das Style auf den div-Elementen wie style="Float:none" anwenden und alle meine div-Elemente begannen vertikal ausgerichtet zu sein. Hier ist das funktionierende Beispiel:

JsFiddle Link

Falls jemand mehr über die float-Eigenschaft lesen möchte:

W3Schools - Float