Ich benutze Bootstrap. Wie kann ich drei Spalten mit derselben Höhe erstellen?
Hier ist ein Screenshot des Problems. Ich möchte, dass die blauen und roten Spalten die gleiche Höhe wie die gelbe Spalte haben.
Hier ist der Code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 panel" style="background-color: red">
some content
</div>
<div class="col-xs-4 panel" style="background-color: yellow">
catz
<img width="100" height="100" src="https://lorempixel.com/100/100/cats/">
</div>
<div class="col-xs-4 panel" style="background-color: blue">
some more content
</div>
</div>
</div>
css
twitter-bootstrap
Richard
quelle
quelle
.row
fehltflex-wrap: wrap;
. Hier ist ein Beispiel dafür, wie man mit Reaktionsfähigkeit arbeitet: codepen.io/bootstrapped/details/RrabNeAntworten:
Lösung 4 mit Bootstrap 4
Bootstrap 4 verwendet Flexbox, sodass kein zusätzliches CSS erforderlich ist.
Demo
Lösung 1 mit negativen Rändern (unterbricht nicht die Reaktionsfähigkeit)
Demo
Lösung 2 unter Verwendung der Tabelle
Demo
Lösung 3 mit Flex wurde im August 2015 hinzugefügt. Vorher veröffentlichte Kommentare gelten nicht für diese Lösung.
Demo
quelle
flex-wrap: wrap;
dem dritten Beispiel hinzufügen , um die Reaktionsfähigkeit zu aktivieren. Sie möchten auch Anzeige hinzufügen: flex; Flex-Richtung: Säule; zur Spaltenklasse. Wenn Sie .row und keine benutzerdefinierte Klasse verwenden möchten, müssen Sie einen Fallback für ältere Browser bereitstellen, die den Flex der Anzeige ändern. Hier ist ein BeispielUpdate 2020
Bester Ansatz für Bootstap 3.x - Verwendung von CSS- Flexbox (und erfordert nur minimales CSS).
Bootstrap-Flexbox-Beispiel gleicher Höhe
Verwenden Sie eine Medienabfrage, um die Flexbox mit derselben Höhe nur an bestimmten Haltepunkten (reaktionsschnell) anzuwenden. Zum Beispiel ist hier
sm
(768px) und höher:Diese Lösung eignet sich auch für mehrere Zeilen (Spaltenumbruch):
https://www.bootply.com/gCEXzPMehZ
Andere Problemumgehungen
Diese Optionen werden von anderen empfohlen, sind jedoch keine gute Idee für ein responsives Design. Diese funktionieren nur für einfache einzeilige Layouts ohne Spaltenumbruch.
1) Verwenden Sie große negative Ränder und Polster
2) Verwenden von display: table-cell (diese Lösung wirkt sich auch auf das responsive Raster aus, sodass eine @ media-Abfrage verwendet werden kann, um die
table
Anzeige nur auf breiteren Bildschirmen anzuwenden , bevor die Spalten vertikal gestapelt werden. )Bootstrap 4
Flexbox wird jetzt standardmäßig in Bootstrap 4 verwendet, sodass das zusätzliche CSS keine Spalten mit gleicher Höhe erstellen muss: http://www.codeply.com/go/IJYRI4LPwU
Beispiel:
quelle
Kein JavaScript erforderlich. Fügen Sie die Klasse einfach wie folgt
.row-eq-height
zu Ihrer vorhandenen hinzu.row
:Tipp: Wenn Ihre Zeile mehr als 12 Spalten enthält, kann das Bootstrap-Raster diese nicht umbrechen. Fügen Sie also eine neue hinzu
div.row.row-eq-height
alle 12 Spalten .Tipp: Möglicherweise müssen Sie hinzufügen
zu Ihrem HTML
quelle
Um Ihre Frage zu beantworten, ist dies alles, was Sie brauchen, um eine vollständige Demo mit dem Präfix CSS zu sehen :
Fügen Sie Folgendes hinzu, um die Unterstützung für den Flex von Miniaturansichten in Flex-Spalten wie im obigen Screenshot hinzuzufügen ... Beachten Sie, dass Sie dies auch mit Bedienfeldern tun können:
Während Flexbox in IE9 und darunter nicht funktioniert, können Sie die Demo mit einem Fallback verwenden, indem Sie bedingte Tags mit so etwas wie Javascript-Gittern als Polyfill verwenden:
Was die beiden anderen Beispiele in der akzeptierten Antwort betrifft ... Die Tabellendemo ist eine anständige Idee, wird aber falsch implementiert. Wenn Sie dieses CSS speziell auf Bootstrap-Spaltenklassen anwenden, wird das Grid-Framework ohne Zweifel vollständig beschädigt. Sie sollten einen benutzerdefinierten Selektor für eins und zwei verwenden. Die Tabellenstile sollten nicht auf
[class*='col-']
definierte Breiten angewendet werden . Diese Methode sollte NUR verwendet werden, wenn Sie Spalten mit gleicher Höhe UND gleicher Breite wünschen. Es ist nicht für andere Layouts gedacht und reagiert NICHT. Wir können es jedoch auf mobilen Displays zurückgreifen lassen ...Zuletzt die erste Demo in der akzeptierten Antwort, die eine Version des einen wahren Layouts implementiert für einige Situationen eine gute Wahl, jedoch nicht für Bootstrap-Spalten geeignet. Der Grund dafür ist, dass alle Spalten auf die Containerhöhe erweitert werden. Dies beeinträchtigt also auch die Reaktionsfähigkeit, da die Spalten nicht auf die Elemente neben ihnen, sondern auf den gesamten Container erweitert werden. Mit dieser Methode können Sie auch keine unteren Ränder mehr auf Zeilen anwenden und andere Probleme verursachen, z. B. das Scrollen zu Ankertags.
Den vollständigen Code finden Sie im Codepen, dem der Flexbox-Code automatisch vorangestellt wird.
quelle
row:after, row:before
Set display: table zu tun , das Safari anscheinend nicht mag.Sie zeigen nur eine Zeile an, sodass Ihr Anwendungsfall möglicherweise auf genau diese beschränkt ist. Nur für den Fall, dass Sie mehrere Zeilen haben, funktioniert dieses Plugin - Github Javascript-Grids - perfekt! Dadurch wird jedes Bedienfeld zum höchsten Bedienfeld erweitert, sodass jede Zeile möglicherweise eine andere Höhe hat, basierend auf dem höchsten Bedienfeld in dieser Zeile. Es ist eine jquery-Lösung im Vergleich zu CSS, wollte es aber als alternativen Ansatz empfehlen.
quelle
Wenn Sie möchten, dass dies in einem beliebigen Browser funktioniert, verwenden Sie Javascript:
quelle
.ready()
nicht der richtige Zeitpunkt, um es anzurufen - es sollte aufgerufen werden.load()
window.onload = function() {...function content above...}
stattdessen. Das funktioniert besser.Ich habe viele der Vorschläge in diesem Thread und auf anderen Seiten ausprobiert, aber keine Lösung hat in jedem Browser zu 100% funktioniert.
Also habe ich einige Zeit experimentiert und mir das ausgedacht. Eine Komplettlösung für Bootstrap Equal Height-Säulen mit Hilfe der Flexbox mit nur 1 Klasse. Dies funktioniert in allen gängigen Browsern IE10 +.
CSS:
HTML:
Um noch mehr Versionen von IE zu unterstützen, können Sie beispielsweise https://github.com/liabru/jquery-match-height verwenden und auf alle untergeordneten Spalten von abzielen
.equal-cols
. So was:Ohne diese Polyfüllung verhalten sich die Spalten wie normale Bootstrap-Spalten, was ein recht guter Fallback ist.
quelle
Sie können auch Inline-Flex verwenden, was ziemlich gut funktioniert und möglicherweise etwas sauberer ist, als jedes Zeilenelement mit CSS zu ändern.
Für mein Projekt wollte ich, dass jede Zeile, deren untergeordnete Elemente Ränder haben, dieselbe Höhe hat, damit die Ränder gezackt aussehen. Dafür habe ich eine einfache CSS-Klasse erstellt.
quelle
Von:
http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css
quelle
freche jquery lösung wenn jemand interessiert ist. Stellen Sie einfach sicher, dass alle Ihre Spalten (el) einen gemeinsamen Klassennamen haben ... funktioniert auch, wenn Sie ihn an $ (window) .resize binden
Verwendungszweck
Hinweis: Dieser Beitrag wurde gemäß dem Kommentar von @Chris bearbeitet, wobei darauf hingewiesen wurde, dass der Code nur die zuletzt höchste Höhe in der
$.each()
Funktion festgelegt hatquelle
Einige der vorherigen Antworten erklären, wie die Divs auf die gleiche Höhe gebracht werden. Das Problem ist jedoch, dass die Divs nicht gestapelt werden, wenn die Breite zu eng ist. Daher können Sie ihre Antworten mit einem zusätzlichen Teil implementieren. Für jeden können Sie den hier angegebenen CSS-Namen zusätzlich zu der von Ihnen verwendeten Zeilenklasse verwenden. Das div sollte also so aussehen, wenn die divs immer nebeneinander stehen sollen:
Für alle Bildschirme:
Wenn Sie sm verwenden möchten:
Für wann Sie md wollen:
Wenn Sie lg verwenden möchten:
BEARBEITEN Basierend auf einem Kommentar gibt es zwar eine einfachere Lösung, aber Sie müssen sicherstellen, dass Spalteninformationen von der größten gewünschten Breite für alle Größen bis zu xs angegeben werden (z. B
<div class="col-md-3 col-sm-4 col-xs-12">
.:quelle
flex-wrap: wrap;
dann brauchst du nicht alle separaten ... es sei denn, du willst sie speziell.Ich bin überrascht, dass ich hier Ende 2018 keine lohnende Lösung finden konnte. Ich habe selbst eine Bootstrap 3-Lösung mit Flexbox gefunden.
Sauberes und einfaches Beispiel:
HTML
CSS
Arbeitsdemo anzeigen: http://jsfiddle.net/5kmtfrny/
quelle
Ich weiß, dass ich sehr spät bin, aber jetzt können Sie das Stilattribut "min-height" verwenden, um Ihren Zweck zu erreichen.
quelle
Wenn jemand Bootstrap 4 verwendet und nach Spalten gleicher Höhe sucht, verwenden Sie einfach
row-eq-height
das übergeordnete divRef: http://getbootstrap.com.vn/examples/equal-height-columns/
quelle
Hier ist meine Lösung (kompiliertes CSS):
Ihr Code würde also so aussehen:
Grundsätzlich ist dies das gleiche System, das Sie für
.col-*
Klassen mit dem Unterschied verwenden, den Sie anwenden müssen.row-*
Klassen auf die Zeile selbst .Mit
.row-sm-eq
Spalten werden auf XS-Bildschirmen gestapelt. Wenn Sie nicht möchten, dass sie auf einem Bildschirm gestapelt werden, den Sie verwenden können.row-xs-eq
.Die SASS-Version, die wir tatsächlich verwenden:
Live-Demo
Hinweis: Das Mischen
.col-xs-12
und.col-xs-6
in einer einzelnen Reihe würde nicht richtig funktionieren.quelle
border-spacing
und negativen Rändern von Bootstrap zu haben .Es gibt ein Problem bei der Verwendung von Lösung 1, wenn sie nur auf Spalten in Zeilen angewendet wird. Möchte Lösung 1 verbessern.
(Entschuldigung, ich kann Popnoodles 'Antwort nicht kommentieren. Ich habe nicht genug Ruf)
quelle
Das Beste da draußen:
Github Reflex - Docs
Funktioniert mit Bootstrap
Aktualisieren:
quelle
Hier ist meine Methode, ich habe Flex mit einigen Änderungen in der Medienabfrage verwendet.
Fügen Sie dann dem übergeordneten Element die erforderlichen Klassen hinzu.
Ich verwende reaktionsschnelle Haltepunkte, da Flussmittel normalerweise die reaktionsschnelle Natur des Bootstraps beeinträchtigen.
quelle
Ich benutze diese super einfache Lösung mit
clearfix
, die keine Nebenwirkungen hat.Hier ist ein Beispiel für AngularJS:
Und noch ein Beispiel zu PHP:
quelle
Für diejenigen, die nach einer schnellen und einfachen Lösung suchen - wenn Sie einen relativ konsistenten Satz von Blockinhalten haben, kann es einfacher zu implementieren sein, eine minimale Höhe auf dem Div festzulegen, die etwas größer als der größte Block ist.
quelle
Dabei ist .container-height die Stilklasse, die einem .row-Stilelement hinzugefügt werden muss, zu dem alle .col * -Kinder dieselbe Höhe haben.
Durch das Anwenden dieser Stile nur auf eine bestimmte .row (mit .container-height, wie im Beispiel) wird auch vermieden, dass der Rand und der Auffüllüberlauf auf alle .col * angewendet werden.
quelle
Ich suchte nach einer Lösung für das gleiche Problem und fand eine, die gerade funktioniert hat !! - fast ohne zusätzlichen Code ..
Unter https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 finden Sie eine gute Diskussion und mit der gewünschten Auflösung unten einen Link.
https://www.codeply.com/go/EskIjvun4B
Dies war für mich der richtige Weg, um ... ein Zitat: ... 3 - Flexbox verwenden (am besten!)
Ab 2017 ist die Verwendung der CSS3-Flexbox der beste (und einfachste) Weg, um Säulen gleicher Höhe in einem reaktionsschnellen Design zu erstellen.
und einfach benutzen:
quelle
Beispiel:
https://jsfiddle.net/b9chris/njcnex83/embedded/result/
Angepasst an mehrere Antworten hier. Die flexbox-basierten Antworten sind der richtige Weg, wenn IE8 und 9 tot sind und wenn Android 2.x tot ist, aber das ist 2015 nicht wahr und wird wahrscheinlich 2016 nicht sein. IE8 und 9 machen immer noch 4- 6% der Nutzung hängen davon ab, wie Sie messen, und für viele Unternehmensbenutzer ist es viel schlimmer. http://caniuse.com/#feat=flexbox
Der
display: table
,display: table-cell
Trick ist rückwärtskompatibel - und eine große Sache ist das einzige ernsthafte Kompatibilitätsproblem eine Safari Frage ist , wo es Kräftebox-sizing: border-box
, etwas bereits auf Ihre Bootstrap - Tags angewandt. http://caniuse.com/#feat=css-tableSie können natürlich weitere Klassen hinzufügen, die ähnliche Aufgaben ausführen, z
.equal-height-md
. Ich habe diese an divs gebunden, um den geringen Leistungsvorteil bei meiner eingeschränkten Verwendung zu erzielen. Sie können das Tag jedoch entfernen, um es wie den Rest von Bootstrap allgemeiner zu gestalten.Beachten Sie, dass die jsfiddle hier CSS verwendet. Daher sind Dinge, die Less sonst bereitstellen würde, im verknüpften Beispiel fest codiert. Zum Beispiel wurde @ screen-sm-min durch das ersetzt, was Less einfügen würde - 768px.
quelle
Wenn es in Ihrem Kontext sinnvoll ist, können Sie nach jeder Pause einfach ein leeres 12-Spalten-Div hinzufügen, das als Teiler fungiert, der den unteren Rand der höchsten Zelle in Ihrer Zeile umarmt.
Hoffe das hilft!
quelle
Ich wollte nur hinzufügen, dass die Antwort von Dr.Flink auch auf einen Bootstrap 3-
form-horizontal
Block angewendet werden kann - was sehr praktisch sein kann, wenn Sie Hintergrundfarben für jede Zelle verwenden möchten. Damit dies für Bootstrap-Formulare funktioniert, müssen Sie den Formularinhalt umbrechen, der nur dazu dient, eine tabellenartige Struktur zu replizieren.Das folgende Beispiel enthält auch das CSS, das eine zusätzliche Medienabfrage demonstriert, mit der Bootstrap 3 einfach übernehmen und auf kleineren Bildschirmen normal arbeiten kann. Dies funktioniert auch in IE8 +.
Beispiel:
quelle
Versuchen Sie dies durch Flex-Box
Live JSFiddle - https://jsfiddle.net/grinmax_/spsn4fnq/
quelle
Ja, Bootstrap 4 macht alle Spalten in einer Zeile gleich hoch. Wenn Sie jedoch einen Rahmen um den Inhalt innerhalb der Zeile erstellen, werden Sie möglicherweise feststellen, dass die Spalten nicht gleich hoch sind!
Als ich mich
height: 100%
auf das Element in der Spalte bewarb , stellte ich fest, dass ich meinen Rand verloren hatte.Meine Lösung besteht darin, das div der Spalte mit einem Polster zu versehen (anstelle eines Randes des inneren Elements). Wie so:
Im obigen Codebeispiel wird mit Bootstrap 4.1 ein Satz von neun Feldern mit einem Rahmen erstellt
quelle
HTML
CSS
JS
quelle
19.03.2019
** Bootstrap 4 Equal Height Solution **
Bootstrap Utilities / Flex für gleiche Höhe
Live-Beispiel in Codepen
Gleiche Höhe nach Bootstrap-Klasse mit festem übergeordnetem div
height
odermin-height
Code-Snippet anzeigen
quelle
Sie können die Spalten in ein div einschließen
quelle