Frage Wie kann ich Bootstrap-Säulen auf die gleiche Höhe bringen?


Ich benutze Bootstrap. Wie kann ich drei Säulen auf gleicher Höhe machen?

Hier ist ein Screenshot des Problems. Ich möchte, dass die blauen und roten Säulen die gleiche Höhe wie die gelbe Säule haben.

Three bootstrap columns with the center column longer than the other two columns

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>


777
2017-10-30 23:31


Ursprung


Antworten:


Lösung 1 mit negativen Margen (unterbricht die Reaktionsfähigkeit nicht) 

Demo

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Lösung 2 mit Tabelle 

Demo

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

Lösung 3 mit flex hinzugefügt August 2015. Kommentare, die vorher gepostet wurden, gelten nicht für diese Lösung.

Demo

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

884
2017-10-30 23:38



Aktualisierung 2018

Der beste Ansatz für Bootstap 3.x - mit CSS Flexbox (und erfordert minimal CSS) ..

.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

Bootstrap selbe Höhe Flexbox Beispiel

Verwenden Sie eine Medienabfrage, um Flexbox mit derselben Höhe nur an bestimmten Haltepunkten (reaktionsfähig) anzuwenden. Zum Beispiel, hier ist sm(768px) und höher:

@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}

Diese Lösung funktioniert auch für mehrere Zeilen (Spaltenumbruch):
https://www.bootply.com/gCEXzPMehZ

Andere Problemumgehungen

Diese Optionen werden von anderen empfohlen, aber sind keine gute Idee für ansprechendes Design. Diese funktionieren nur für einfache einreihige Layouts ohne Spaltenumbruch.

1) Verwenden riesige negative Ränder und Polsterung

2) Verwenden Anzeige: Tabellenzelle (Diese Lösung wirkt sich auch auf das Responsive-Raster aus, sodass eine @ media-Abfrage nur zum Anwenden verwendet werden kann table Anzeige auf breiteren Bildschirmen, bevor die Spalten vertikal gestapelt werden)


Bootstrap 4

Flexbox wird jetzt standardmäßig in Bootstrap 4 verwendet, so dass das zusätzliche CSS keine Spalten mit gleicher Höhe benötigt: http://www.codeply.com/go/IJYRI4LPwU


216
2018-04-06 10:25



Kein JavaScript benötigt. Fügen Sie einfach die Klasse hinzu .row-eq-height zu deinem vorhandenen .row genau wie dieser:

<div class="row row-eq-height">
  <div class="col-xs-12 col-sm-4 panel" style="background-color: red">
    some content
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
    kittenz
  <img src="http://placekitten.com/100/100">
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
    some more content
  </div>
</div>

Tipp: Wenn Sie mehr als 12 Spalten in Ihrer Zeile haben, kann das Bootstrap-Gitter sie nicht umbrechen. Also füge ein neues hinzu div.row.row-eq-height jeweils 12 Spalten.

Tipp: Möglicherweise müssen Sie hinzufügen

<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" />

zu deinem HTML


78
2018-04-29 10:40



Um Ihre Frage zu beantworten, ist dies alles was Sie brauchen Siehe vollständige responsive Demo mit Präfix css:

/* Using col-xs media query breakpoint but you can change 481 to 768 to only apply to col-sm and above if you'd like*/

@media only screen and (min-width : 481px) {
    .flex-row {
        display: flex;
        flex-wrap: wrap;
    }
    .flex-row > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }
    .flex-row.row:after, 
    .flex-row.row:before {
        display: flex;
    }
}

Screenshot of Codepen

Um Unterstützung für den Thumbnail-Inhalt flex in Flex-Spalten hinzuzufügen, wie oben im Screenshot, fügen Sie diesen hinzu ... Beachten Sie, dass Sie dies auch mit Panels tun könnten: 

.flex-row .thumbnail,
.flex-row .caption {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}
.flex-text {
    flex-grow: 1;
}    
.flex-row img {
    width: 100%;
}

Während Flexbox in IE9 und darunter nicht funktioniert, können Sie die Demo mit einem Fallback verwenden, indem Sie bedingte Tags mit ähnlichem verwenden JavaScript-Gitter als Polyfill:

<!--[if lte IE 9]>

<![endif]-->

Wie für die anderen beiden Beispiele in der akzeptierten Antwort ... Die Tabelle Demo ist eine anständige Idee, wird aber falsch implementiert. Wenn Sie dieses CSS explizit auf Bootstrap-Spaltenklassen anwenden, wird das Grid-Framework ohne Zweifel durchbrochen. Sie sollten einen benutzerdefinierten Selektor für eins und zwei verwenden, auf den die Tabellenstile nicht angewendet werden sollen [class*='col-'] das haben Breiten definiert. 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 mobile Displays zurückfallen lassen ...

<div class="table-row-equal">
<div class="thumbnail">
    Content...
</div>
<div class="thumbnail">
    Content...
</div>
</div>
@media only screen and (min-width : 480px){
    .table-row-equal {
        display: table;
        width: 100%;
        table-layout: fixed;
        border-spacing: 30px 0px;
        word-wrap: break-word;
    }
    .table-row-equal .thumbnail {
        float: none;
        display: table-cell;
        vertical-align: top;
        width: 1%;
    }
}

Zuletzt, die erste Demo in der angenommenen Antwort, die eine Version der ein echtes Layout ist eine gute Wahl für einige Situationen, aber nicht für Bootstrap-Spalten geeignet. Der Grund dafür ist, dass alle Spalten auf die Containerhöhe erweitert werden. Dadurch wird auch die Reaktionsfähigkeit beeinträchtigt, da die Spalten nicht auf die Elemente neben ihnen erweitert werden, sondern auf den gesamten Container. Mit dieser Methode können Sie auch keine unteren Ränder mehr auf Zeilen anwenden und verursachen auch andere Probleme wie das Scrollen zum Verankern von Tags.

Den vollständigen Code finden Sie im Codepen, der den Flexbox-Code automatisch voranstellt.


46
2017-12-20 12:48



Sie zeigen nur eine Zeile an, sodass Ihr Anwendungsfall genau darauf beschränkt sein kann. Nur für den Fall, dass Sie mehrere Zeilen haben, dieses Plugin - github Javascript-Gitter - funktioniert perfekt! Dadurch wird jedes Panel auf das höchste Panel erweitert, wodurch für jede Zeile basierend auf dem höchsten Panel in dieser Zeile möglicherweise eine andere Höhe festgelegt wird. Es ist eine jQuery-Lösung gegen CSS, aber wollte es als einen alternativen Ansatz empfehlen.


38
2017-11-19 17:47



Wenn Sie dies in einem beliebigen Browser ausführen möchten, verwenden Sie javascript:

$( document ).ready(function() {
    var heights = $(".panel").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".panel").height(maxHeight);
});

24
2018-02-26 21:03



.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

Von:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css


8
2017-11-10 18:21



Sie können auch Inline-Flex verwenden, was ziemlich gut funktioniert und etwas sauberer ist, als jedes Zeilenelement mit CSS zu modifizieren.

Für mein Projekt wollte ich, dass jede Zeile, deren untergeordnete Elemente Ränder haben, dieselbe Höhe hat, sodass die Ränder gezackt aussehen würden. Dafür habe ich eine einfache CSS-Klasse erstellt.

.row.borders{
    display: inline-flex;
    width: 100%;
}

7
2018-05-12 19:26