Wie kann ich Bootstrap-Spalten auf die gleiche Höhe bringen?

965

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.

Drei Bootstrap-Spalten, wobei die mittlere Spalte länger als die beiden anderen Spalten ist

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>

Richard
quelle
11
Es gibt einen Artikel auf der Bootstrap-Website mit einer 5-Zeilen-Lösung getbootstrap.com.vn/examples/equal-height-columns
Eduard Gamonal
2
Das Beispiel auf Bootstrap unterbricht die Reaktionsfähigkeit von Eduard. Der Flex .rowfehlt flex-wrap: wrap;. Hier ist ein Beispiel dafür, wie man mit Reaktionsfähigkeit arbeitet: codepen.io/bootstrapped/details/RrabNe
Bryan Willis
Mögliche Problemumgehung - Ein transparentes Bild mit einer Breite von 1 Pixel in den anderen Spalten. Dieses neue Bild mit einer Pixelbreite entspricht der Pixelhöhe des Katzenbilds im obigen Beispiel. (
Kann
In Bootstrap 4 können wir die Karte für das gleiche verwenden
Amjad Rehman A

Antworten:

1045

Lösung 4 mit Bootstrap 4

Bootstrap 4 verwendet Flexbox, sodass kein zusätzliches CSS erforderlich ist.

Demo

<div class="container">
    <div class="row ">
        <div class="col-md-4" style="background-color: red">
          some content
        </div>
        <div class="col-md-4" style="background-color: yellow">
          catz
          <img width="100" height="100" src="https://placekitten.com/100/100/">
        </div>
        <div class="col-md-4" style="background-color: green">
          some more content
        </div>
    </div>
</div>

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

Demo

.row{
    overflow: hidden; 
}

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

Lösung 2 unter Verwendung der Tabelle

Demo

.row {
    display: table;
}

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

Lösung 3 mit Flex wurde im August 2015 hinzugefügt. Vorher veröffentlichte Kommentare 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;
}
Popnudeln
quelle
7
Stellen Sie sich das als die Säule vor, die in den negativen Raum gesaugt wird. Wenn Sie den Überlauf entfernen, sehen Sie, was los ist.
Popnoodles
9
Wenn Sie speziell auf die Bootstrap-Spaltenklasse abzielen, sollten Sie wahrscheinlich einen Anker ^ anstelle eines Platzhalters * verwenden. Wenn Sie ^ verwenden, bedeutet dies, dass die Klasse mit col beginnen muss, da der angezeigte Platzhalter mit jeder Klasse mit col an einer beliebigen Stelle in der Zeichenfolge übereinstimmt und möglicherweise unerwünschte Auswirkungen auf Stile hat, bei denen Sie möglicherweise die Konventionsspalte verwendet haben. (dh Zeug-Col-Morestuff).
Logan G.
7
Schöne Antwort mit einigen Einschränkungen. Lösung 1 deaktiviert den Float und unterbricht daher das Reaktionsverhalten des Bootstrap-Grids. Lösung 2 (ausführlicher in positioniseverything.net/articles/onetruelayout/equalheight erläutert ) zeigt den unteren Rand nicht an (da er irgendwo im Polsterbereich abgeschnitten ist).
Ohad Schneider
14
Lösung 3 unterbricht die Reaktionsfähigkeit der Zeilen.
SPRBRN
10
@ Popnoodles sollten Sie 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 Beispiel
Bryan Willis
321

Update 2020

Bester Ansatz für Bootstap 3.x - Verwendung von CSS- Flexbox (und erfordert nur minimales CSS).

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

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:

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

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 tableAnzeige 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:

<div class="container">
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>
Zim
quelle
5
Sie können eine Medienabfrage verwenden, um die Flexbox nur auf größere / breitere Geräte anzuwenden. Ich habe die Bootply aktualisiert: bootply.com/Cn6fA6LuTq
Zim
Falls jemand interessiert ist, habe ich einen Stift erstellt , um ähnliche Effekte auf einem Formular mit Flexbox zu demonstrieren.
Justin Lau
2
Es ist ein bekannter Safari-Fehler mit Flexbox: Beweis: bugs.webkit.org/show_bug.cgi?id=137730
Zim
5
@ Stanley Der Kommentar zu "nicht mehr ansprechbar" ist alt und irrelevant.
Zim
1
Dies ist die einzige Lösung, die bei mir funktioniert hat. Danke Zim das ist toll!
Ryan NZ
83

Kein JavaScript erforderlich. Fügen Sie die Klasse einfach wie folgt .row-eq-heightzu Ihrer vorhandenen hinzu .row:

<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 Ihre Zeile mehr als 12 Spalten enthält, kann das Bootstrap-Raster diese nicht umbrechen. Fügen Sie also eine neue hinzudiv.row.row-eq-height alle 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 Ihrem HTML

Kevin R.
quelle
5
Flexbox-basiert. Funktioniert nicht in IE8 oder 9, noch Android 2.x caniuse.com/#feat=flexbox
Chris Moschini
60
Hinweis: getbootstrap.vn ist nicht "Bootstrap". Es ist ein Drittanbieterprojekt.
Zim
Dies scheint jedoch in Bootstrap v4 integriert zu sein.
Cyril Duchon-Doris
Ich habe das richtige CSS (von der .vn-Site) eingefügt, aber es bringt alles durcheinander. es basiert auf flex
ekkis
Großartig ... Plugin Hölle.
Armada
63

Um Ihre Frage zu beantworten, ist dies alles, was Sie brauchen, um eine vollständige Demo mit dem Präfix CSS zu sehen :

/* 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 von Codepen

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:

.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 so etwas wie Javascript-Gittern als Polyfill verwenden:

<!--[if lte IE 9]>

<![endif]-->

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 ...

<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 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.

Bryan Willis
quelle
11
Das ist die einzige Antwort, die tatsächlich für mich funktioniert hat. Die 3 am besten bewerteten Antworten waren nur Zeitverschwendung
Ken2k
3
Sieht gut aus, funktioniert aber leider nicht in Safari 9.1 unter MacOS :-(
KevinH
1
@ TheSchecke hier ist das Update. Soweit ich weiß, funktioniert dies jetzt in allen von Flexbox unterstützten Browsern. Bitte lassen Sie mich wissen, wenn ich falsch liege. s.codepen.io/bootstrapped/debug/pboJNd . Das Problem hatte mit dem row:after, row:beforeSet display: table zu tun , das Safari anscheinend nicht mag.
Bryan Willis
2
Nur ein Hinweis, dass dies im Safari-Browser des iPad wirklich schlecht funktioniert
Matthew Lock
1
Tut mir leid das @MatthewLock zu hören. Ich habe gerade auf meinem IPad Air IOS 8.1 mit der neuesten Safari getestet und es funktioniert darauf. Ich konnte auch auf crossbrowsertesting.com mit iPad mini retina mit Safari 7 testen und das scheint auch gut zu funktionieren. Hier sind die Ergebnisse dieses Tests. Können Sie die von Ihnen verwendete iPad- und Safari-Version bereitstellen? Ich würde gerne versuchen, dieses Problem so schnell wie möglich zu beheben oder zumindest einen Kommentar in die Antwort aufzunehmen, da ich weiß, dass viele Leute es verwenden.
Bryan Willis
42

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.

globalSchmidt
quelle
1
Die einzige Lösung, die wirklich funktioniert und die Reaktionsfähigkeit nicht
beeinträchtigt
Können Sie damit festlegen, dass die Spalten quadratisch sein sollen - oder nur alle dieselbe Höhe?
Niico
@niico 14 - es ist schon eine Weile her, seit ich dies verwendet habe, aber in meiner Anwendung ist die Anforderung, dass die Elemente in jeder Zeile dieselbe Höhe haben, aber die Höhe kann von Zeile zu Zeile variieren. Da die Höhe eine Funktion der Elemente in der Zeile ist, sollten sie als Quadrate dargestellt werden, wenn Ihre Elementhöhe ihrer Breite entspricht.
GlobalSchmidt
30

Wenn Sie möchten, dass dies in einem beliebigen Browser funktioniert, verwenden Sie Javascript:

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

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

    $(".panel").height(maxHeight);
});
paulalexandru
quelle
1
Haben Sie eine div class = "row" mit variabler Anzahl von Panels jeder Klasse "col-md-4", die mir 3 Spalten und eine unbekannte Anzahl von Zeilen geben sollte, abhängig von der Anzahl der Elemente, die ich auflisten möchte. Dieses JS hat funktioniert und erfordert nur minimale Änderungen in meinem HTML / CSS, im Gegensatz zu verschiedenen CSS-Dingen, die ich ausprobiert habe. Das einzige, was ich geändert habe, war, alle meine Spaltenfelder mit einer zusätzlichen Klasse zu markieren, dh "Feld gleicher Höhe", und dann $ ("Feld gleicher Höhe") anstelle von $ ("Feld") zu verwenden
nidalpres
1
Die einzige Lösung, die für mich nach einem Tag des Experimentierens mit CSS-Sachen funktioniert hat.
Dinosaurius
1
Dies ist eine gute Lösung, aber .ready()nicht der richtige Zeitpunkt, um es anzurufen - es sollte aufgerufen werden.load()
jave.web
1
@ jave.web Wenn Sie der Meinung sind, dass dies eine gute Lösung ist, geben Sie bitte einen Daumen hoch. Danke
Paulalexandru
Verwenden Sie window.onload = function() {...function content above...}stattdessen. Das funktioniert besser.
Blackpanther0001
10

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:

.row.equal-cols {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.row.equal-cols:before,
.row.equal-cols:after {
  display: block;
}

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

.row.equal-cols > [class*='col-'] > * {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; 
}

HTML:

<div class="container">
  <div class="row equal-cols">
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
  </div>
</div>

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:

// Create a check for IE9 (or any other specific browser).
if(IE9) {
  $(".row.equal-cols > [class*='col-']").matchHeight();
}

Ohne diese Polyfüllung verhalten sich die Spalten wie normale Bootstrap-Spalten, was ein recht guter Fallback ist.

Adam Lindqvist
quelle
Das hat bei mir hervorragend funktioniert. Vielen Dank!
Randlet
8

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.

.row.borders{
    display: inline-flex;
    width: 100%;
}
Steffan Perry
quelle
2
Während es gelingt, alle Inhalte in der Zeile auf die gleiche Höhe zu bringen; Dies beeinträchtigt die Reaktionsfähigkeit von Bootstrap.
Christine268
7

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

function equal_cols(el)
{
    var h = 0;
    $(el).each(function(){
        $(this).css({'height':'auto'});
        if($(this).outerHeight() > h)
        {
            h = $(this).outerHeight();
        }
    });
    $(el).each(function(){
        $(this).css({'height':h});
    });
}

Verwendungszweck

$(document).ready(function(){
   equal_cols('.selector');
});

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 hat

Marty
quelle
Dies ist untertrieben - einfach und klein, ändert jedoch die Größe aller Spalten, ohne dass eine feste Anzahl von Spalten in einer Zeile erforderlich ist. Schön!
Jordon
1
Dies funktioniert nicht, da Sie in jeder Funktion die letzte größte Höhe einstellen. Wenn die dritte Spalte die höchste Spalte ist, erhalten Spalte 1 und 2 nicht die richtige Höhe. Sie müssen die letzte Zeile "$ (this) .css ({'height': h});" nach jeder Funktion. Ich werde eine Bearbeitung machen.
Chris
7

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:

<div class="row row-eq-height-xs">Your Content Here</div>

Für alle Bildschirme:

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

Wenn Sie sm verwenden möchten:

.row-eq-height-sm {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:768px) {
    .row-eq-height-sm {
        flex-direction: row;
    }
}

Für wann Sie md wollen:

.row-eq-height-md {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:992px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

Wenn Sie lg verwenden möchten:

.row-eq-height-lg {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:1200px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

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">.:

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
Zachary Weixelbaum
quelle
Du hast das viel komplizierter gemacht als nötig :) `Benutze es einfach, flex-wrap: wrap;dann brauchst du nicht alle separaten ... es sei denn, du willst sie speziell.
Bryan Willis
Dies schlägt auf iPad Safari
Matthew Lock
6

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:

Beispiel für übereinstimmende Spaltenbreiten in Bootstrap 3

HTML

<div class="row row-equal">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <p>Text</p>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <img src="//placehold.it/200x200">
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <p>Text</p>
    </div>  
</div>

CSS

img {
  width: 100%;
}
p {
  padding: 2em;
}
@media (min-width: 768px) {
  .row-equal {
    display: flex;
    flex-wrap: wrap;
  }
  .col-equal {
    margin: auto;
  }
}

Arbeitsdemo anzeigen: http://jsfiddle.net/5kmtfrny/

BuffMcBigHuge
quelle
5

Ich weiß, dass ich sehr spät bin, aber jetzt können Sie das Stilattribut "min-height" verwenden, um Ihren Zweck zu erreichen.

Faiz
quelle
5

Wenn jemand Bootstrap 4 verwendet und nach Spalten gleicher Höhe sucht, verwenden Sie einfach row-eq-heightdas übergeordnete div

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-eq-height">
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div>
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4<br>this is<br>a much<br>taller<br>column<br>than the others</div>
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div>
</div>

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

Znaneswar
quelle
3

Hier ist meine Lösung (kompiliertes CSS):

.row.row-xs-eq {
  display: table;
  table-layout: fixed;
  margin: 0;
}

.row.row-xs-eq::before {
  content: none;
}

.row.row-xs-eq::after {
  content: none;
}

.row.row-xs-eq > [class^='col-'] {
  display: table-cell;
  float: none;
  padding: 0;
}

@media (min-width: 768px) {
  .row.row-sm-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-sm-eq::before {
    content: none;
  }

  .row.row-sm-eq::after {
    content: none;
  }

  .row.row-sm-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

@media (min-width: 992px) {
  .row.row-md-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-md-eq::before {
    content: none;
  }

  .row.row-md-eq::after {
    content: none;
  }

  .row.row-md-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

@media (min-width: 1200px) {
  .row.row-lg-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-lg-eq::before {
    content: none;
  }

  .row.row-lg-eq::after {
    content: none;
  }

  .row.row-lg-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

Ihr Code würde also so aussehen:

<div class="row row-sm-eq">
  <!-- your old cols definition here -->
</div>

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-eqSpalten 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:

.row {
  @mixin row-eq-height {
    display: table;
    table-layout: fixed;
    margin: 0;

    &::before {
      content: none;
    }

    &::after {
      content: none;
    }

    > [class^='col-'] {
      display: table-cell;
      float: none;
      padding: 0;
    }
  }

  &.row-xs-eq {
    @include row-eq-height;
  }

  @media (min-width: $screen-sm-min) {
    &.row-sm-eq {
      @include row-eq-height;
    }
  }

  @media (min-width: $screen-md-min) {
    &.row-md-eq {
      @include row-eq-height;
    }
  }

  @media (min-width: $screen-lg-min) {
    &.row-lg-eq {
      @include row-eq-height;
    }
  }
}

Live-Demo


Hinweis: Das Mischen .col-xs-12und .col-xs-6in einer einzelnen Reihe würde nicht richtig funktionieren.

Alexander S.
quelle
Das ist gut. Meine Lösung ist dieselbe. Und es besteht die Möglichkeit, Spalten mit gleicher Höhe mit 30px-Lücken zwischen Standardspalten border-spacingund negativen Rändern von Bootstrap zu haben .
Max
3

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.

 [class^="col-"]:not([class*="-12"]){
      margin-bottom: -99999px;
      padding-bottom: 99999px;
  }

(Entschuldigung, ich kann Popnoodles 'Antwort nicht kommentieren. Ich habe nicht genug Ruf)

Станислав Пономарев
quelle
2

Das Beste da draußen:

Github Reflex - Docs

Funktioniert mit Bootstrap

Aktualisieren:

  1. Fügen Sie das CSS hinzu
  2. Aktualisieren Sie Ihren Code:

/*!
 *
 * Reflex v1.0
 *
 * Reflex is a flexbox grid which provides a way to take advantage of emerging
 * flexbox support while providing a fall back to inline-block on older browsers
 *
 * Built by Lee Jordan G.C.S.E.
 * email: [email protected]
 * github: https://github.com/leejordan
 *
 * Structure and calculations are inspired by twitter bootstrap
 *
 */
.reflex-order-12 {
  -webkit-order: 12;
  -ms-flex-order: 12;
  order: 12;
}
.reflex-order-11 {
  -webkit-order: 11;
  -ms-flex-order: 11;
  order: 11;
}
.reflex-order-10 {
  -webkit-order: 10;
  -ms-flex-order: 10;
  order: 10;
}
.reflex-order-9 {
  -webkit-order: 9;
  -ms-flex-order: 9;
  order: 9;
}
.reflex-order-8 {
  -webkit-order: 8;
  -ms-flex-order: 8;
  order: 8;
}
.reflex-order-7 {
  -webkit-order: 7;
  -ms-flex-order: 7;
  order: 7;
}
.reflex-order-6 {
  -webkit-order: 6;
  -ms-flex-order: 6;
  order: 6;
}
.reflex-order-5 {
  -webkit-order: 5;
  -ms-flex-order: 5;
  order: 5;
}
.reflex-order-4 {
  -webkit-order: 4;
  -ms-flex-order: 4;
  order: 4;
}
.reflex-order-3 {
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
}
.reflex-order-2 {
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}
.reflex-order-1 {
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}
.reflex-order-0 {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
}
.reflex-container {
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  letter-spacing: -0.31em;
  *letter-spacing: normal;
  word-spacing: -0.43em;
  list-style-type: none;
}
.reflex-container *,
.reflex-container:before,
.reflex-container:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 100%;
  letter-spacing: normal;
  word-spacing: normal;
  white-space: normal;
}
.reflex-container *:before,
.reflex-container *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
[class*="reflex-col-"] {
  width: 100%;
  vertical-align: top;
  position: relative;
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  text-align: left;
  text-align: start;
}
.reflex-item {
  display: block;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}
_:-ms-fullscreen,
:root .reflex-item {
  width: 100%;
}
.reflex-col-12 {
  width: 100%;
  *width: 99.9%;
}
.reflex-col-11 {
  width: 91.66666666666666%;
  *width: 91.56666666666666%;
}
.reflex-col-10 {
  width: 83.33333333333334%;
  *width: 83.23333333333335%;
}
.reflex-col-9 {
  width: 75%;
  *width: 74.9%;
}
.reflex-col-8 {
  width: 66.66666666666666%;
  *width: 66.56666666666666%;
}
.reflex-col-7 {
  width: 58.333333333333336%;
  *width: 58.233333333333334%;
}
.reflex-col-6 {
  width: 50%;
  *width: 49.9%;
}
.reflex-col-5 {
  width: 41.66666666666667%;
  *width: 41.56666666666667%;
}
.reflex-col-4 {
  width: 33.33333333333333%;
  *width: 33.23333333333333%;
}
.reflex-col-3 {
  width: 25%;
  *width: 24.9%;
}
.reflex-col-2 {
  width: 16.666666666666664%;
  *width: 16.566666666666663%;
}
.reflex-col-1 {
  width: 8.333333333333332%;
  *width: 8.233333333333333%;
}
@media (min-width: 480px) {
  .reflex-col-xs-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-xs-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-xs-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-xs-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-xs-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-xs-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-xs-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-xs-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-xs-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-xs-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-xs-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-xs-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 768px) {
  .reflex-col-sm-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-sm-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-sm-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-sm-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-sm-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-sm-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-sm-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-sm-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-sm-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-sm-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-sm-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-sm-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 992px) {
  .reflex-col-md-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-md-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-md-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-md-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-md-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-md-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-md-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-md-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-md-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-md-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-md-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-md-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 1200px) {
  .reflex-col-lg-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-lg-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-lg-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-lg-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-lg-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-lg-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-lg-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-lg-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-lg-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-lg-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-lg-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-lg-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
.reflex-wrap {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.reflex-wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}
.reflex-direction-row-reverse {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.reflex-direction-column {
  -webkit-flex-direction: column;
  flex-direction: column;
}
.reflex-direction-column-reverse {
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
.reflex-align-start {
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.reflex-align-end {
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
.reflex-align-end [class*="reflex-col-"] {
  vertical-align: bottom;
}
.reflex-align-center {
  -webkit-align-items: center;
  align-items: center;
}
.reflex-align-center [class*="reflex-col-"] {
  vertical-align: middle;
}
.reflex-align-baseline {
  -webkit-align-items: baseline;
  align-items: baseline;
}
.reflex-align-baseline [class*="reflex-col-"] {
  vertical-align: baseline;
}
.reflex-align-content-start {
  -webkit-align-content: flex-start;
  align-content: flex-start;
}
.reflex-align-content-end {
  -webkit-align-content: flex-end;
  align-content: flex-end;
}
.reflex-align-content-end [class*="reflex-col-"] {
  vertical-align: bottom;
}
.reflex-align-content-center {
  -webkit-align-content: center;
  align-content: center;
}
.reflex-align-content-space-between {
  -webkit-align-content: space-between;
  align-content: space-between;
}
.reflex-align-content-space-around {
  -webkit-align-content: space-around;
  align-content: space-around;
}
.reflex-align-self-stretch {
  -webkit-align-self: stretch;
  align-self: stretch;
}
.reflex-align-self-start {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.reflex-align-self-end {
  -webkit-align-self: flex-end;
  align-self: flex-end;
  vertical-align: bottom;
}
.reflex-align-self-center {
  -webkit-align-self: center;
  align-self: center;
  vertical-align: middle;
}
.reflex-align-self-baseline {
  -webkit-align-self: baseline;
  align-self: baseline;
  vertical-align: baseline;
}
.reflex-justify-start {
  text-align: left;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.reflex-justify-end {
  text-align: right;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.reflex-justify-center {
  text-align: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.reflex-justify-space-between {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.reflex-justify-space-around {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.reflex-item-margin-sm {
  margin: 0 0.25em 0.5em;
}
.reflex-item-margin-md {
  margin: 0 0.5em 1em;
}
.reflex-item-margin-lg {
  margin: 0 1em 2em;
}
.reflex-item-content-margin-sm * {
  margin-right: 0.25em;
  margin-left: 0.25em;
}
.reflex-item-content-margin-md * {
  margin-right: 0.5em;
  margin-left: 0.25em;
}
.reflex-item-content-margin-lg * {
  margin-right: 1em;
  margin-left: 1em;
}
.reflex-img {
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  width: 100%;
  height: auto;
}
.reflex-item-footer {
  margin-top: auto;
  margin-left: 0;
  margin-right: 0;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reflex-container reflex-wrap">
  <div class="reflex-col-xs-12 reflex-col-sm-4 panel" style="background-color: red">
  some content
  </div>
  <div class="reflex-col-xs-6 reflex-col-sm-4 panel" style="background-color: yellow">
  kittenz
  <img src="http://upload.wikimedia.org/wikipedia/en/1/13/Matrona.jpg">
  </div>
  <div class="reflex-col-xs-6 reflex-col-sm-4 panel" style="background-color: blue">
  some more content
  </div>
</div>

öbl
quelle
Willkommen bei Stack Overflow! Während dieser Link die Frage beantworten kann, ist es besser, die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen. Nur-Link-Antworten können ungültig werden, wenn sich die verknüpfte Seite ändert. Siehe Wie kann ich eine gute Antwort schreiben .
ByteHamster
2

Hier ist meine Methode, ich habe Flex mit einigen Änderungen in der Medienabfrage verwendet.

  @media (min-width: 0px) and (max-width: 767px) {
  .fsi-row-xs-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .fsi-row-sm-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .fsi-row-md-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1200px) {
  .fsi-row-lg-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

Fügen Sie dann dem übergeordneten Element die erforderlichen Klassen hinzu.

<div class="row fsi-row-lg-level fsi-row-md-level">
<div class="col-sm-4">column 1</div>
<div class="col-sm-4">column 2</div>
<div class="col-sm-4">column 3</div>
</div>

Ich verwende reaktionsschnelle Haltepunkte, da Flussmittel normalerweise die reaktionsschnelle Natur des Bootstraps beeinträchtigen.

Ajay Sathish
quelle
2

Ich benutze diese super einfache Lösung mit clearfix , die keine Nebenwirkungen hat.

Hier ist ein Beispiel für AngularJS:

<div ng-repeat-start="item in list">
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
</div>
<div ng-repeat-end>
    <div ng-if="$index % 3 == 2" class="clearfix visible-lg"></div>
    <div ng-if="$index % 2 == 1" class="clearfix visible-md"></div>
</div>

Und noch ein Beispiel zu PHP:

<?php foreach ($list as $i => $item): ?>
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
    <div class="clearfix visible-md"></div>
    <?php if ($i % 2 === 1): ?>
        <div class="clearfix visible-lg"></div>
    <?php endif; ?>
<?php endforeach; ?>
Oleg
quelle
Dadurch werden Ihre Spalten jedoch nicht alle gleich hoch.
Skerit
1
Für mich ist es eine Lösung,
wenn
2

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.

.align-box {
    min-height: 400px;
}
Neal
quelle
2

.row.container-height {
	overflow: hidden; 
}

.row.container-height > [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

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.

DarkScrolls
quelle
2

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.

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

und einfach benutzen:

div class="container">
   <div class="row display-flex .... etc..
kfn
quelle
1
@media (min-width: @screen-sm-min) {
    div.equal-height-sm {
        display: table;


        > div[class^='col-'] {
            display: table-cell;
            float: none;
            vertical-align: top;
        }
    }
}

<div class="equal-height-sm">
    <div class="col-xs-12 col-sm-7">Test<br/>Test<br/>Test</div>
    <div class="col-xs-12 col-sm-5">Test</div>
</div>

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-cellTrick ist rückwärtskompatibel - und eine große Sache ist das einzige ernsthafte Kompatibilitätsproblem eine Safari Frage ist , wo es Kräfte box-sizing: border-box, etwas bereits auf Ihre Bootstrap - Tags angewandt. http://caniuse.com/#feat=css-table

Sie 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.

Chris Moschini
quelle
1

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.

<div class="row">
   <div class="col-xs-6">Some content</div>
   <div class="col-xs-6">
      Lots of content! Lots of content! Lots of content! Lots of content! Lots of content! 
   </div>
   <div id="spacer-div" class="col-xs-12"></div>
   <div class="col-xs-6">More content...</div>
</div><!--this You forgot to close -->

Hoffe das hilft!

Chris Staikos
quelle
Dies beantwortet nicht die Frage, die er gestellt hat!
Ellisan
0

Ich wollte nur hinzufügen, dass die Antwort von Dr.Flink auch auf einen Bootstrap 3- form-horizontalBlock 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:

<form class="form-horizontal" role="form">

  <div class="form-wrapper">
    <div class="form-group">
      <label class="col-xs-12 col-sm-2 control-label">My Label</label>
      <div class="col-xs-12 col-sm-10">
        Some content
      </div>
    </div>
  </div>

</form>
.form-wrapper {
  display: table;
}

.form-wrapper .form-group {
  display: table-row;
}

.form-wrapper .form-group .control-label {
  display: table-cell;
  float: none;
}

.form-wrapper .form-group label + div {
  display: table-cell;
  float: none;
}

@media (max-width: 768px) {
  .form-wrapper {
    display: inherit;
  }
  .form-wrapper .form-group {
    display: block;
  }
  .form-wrapper .form-group .control-label {
    display: inherit;
  }
  .form-wrapper .form-group label + div {
    display: inherit;
  }
}
JoeTidee
quelle
0

Versuchen Sie dies durch Flex-Box

.container {
	display: flex;
	padding-bottom: 50px;
}
.col {
	background: blue;
	padding: 30px;
}

.col.center {
	background: red;
	height: 100px;
	margin-bottom: -50px;
}
<div class="container">
  <div class="col">Left</div>
  <div class="col center">Center</div>
  <div class="col">Right</div>
</div>

Live JSFiddle - https://jsfiddle.net/grinmax_/spsn4fnq/

grinmax
quelle
0

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:

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
    </div>
</div>

Im obigen Codebeispiel wird mit Bootstrap 4.1 ein Satz von neun Feldern mit einem Rahmen erstellt

Dagmar
quelle
0

HTML

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span4 option2">
            <p>left column </p>
            <p>The first column has to be the longest The first column has to be the longes</p>
        </div>

        <div class="span4 option2">
            <p>middle column</p>
        </div>

        <div class="span4 option2">
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
        </div>
    </div>
</div>

CSS

.option2 { background: red; border: black 1px solid; color: white; }

JS

$('.option2').css({
    'height': $('.option2').height()
});
Pacific P. Regmi
quelle
0

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 heightodermin-height

<div class="d-flex align-content-stretch flex-wrap" style="min-height: 200px">
    <div>Flex height test text for example , Flex height test text for example </div>
    <div>Flex item</div>
    <div>Flex item</div>
    <div>Flex item</div>
 </div>

MD Ashik
quelle
3
Warum gibst du mir eine negative Stimme? Kannst du einen Kommentar dazu abgeben?
MD Ashik
-1

Sie können die Spalten in ein div einschließen

<div class="row">
<div class="col-md-12>
  <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>
</div>
Tom Kur
quelle
Hat bei mir mit einem Button in einer der Spalten nicht funktioniert.
Ray Hunter