Ik gebruik Bootstrap. Hoe kan ik drie kolommen van dezelfde hoogte maken?

Hier is een screenshot van het probleem. Ik zou willen dat de blauwe en rode kolommen dezelfde hoogte hebben als de gele kolom.

Drie bootstrap-kolommen met de middelste kolom langer dan de andere twee kolommen

Hier is de 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>

Antwoord 1, autoriteit 100%

Oplossing 4 met Bootstrap 4

Bootstrap 4 gebruikt Flexbox, dus er is geen extra CSS nodig.

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>

Oplossing 1 die negatieve marges gebruikt (verbreekt het reactievermogen niet)

Demo

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

Oplossing 2 met behulp van tabel

Demo

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

Oplossing 3 met flex toegevoegd in augustus 2015. Eerder geplaatste opmerkingen zijn niet van toepassing op deze oplossing.

Demo

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

Antwoord 2, autoriteit 34%

Update 2021

Bootstrap 4 + 5

Flexbox wordt nu standaard gebruikt in Bootstrap 4 (en Bootstrap 5), dus er is geen extra CSS nodig om kolommen van gelijke hoogte te maken: http://www.codeply.com/go/IJYRI4LPwU

Voorbeeld:

<div class="container">
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>

Bootstrap 3

Beste aanpak voor Bootstap 3.x — met behulp van CSS flexbox (en vereist minimale CSS)..

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

Bootstrap flexbox van dezelfde hoogte

Gebruik een mediaquery om flexbox met dezelfde hoogte alleen toe te passen op specifieke breekpunten (responsief). Hier is bijvoorbeeld sm(768px) en hoger:

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

Deze oplossing werkt ook goed voor meerdere rijen (kolomomloop):
https://www.bootply.com/gCEXzPMehZ

Andere oplossingen

Deze opties worden aanbevolen door anderen, maar zijn dat niet een goed idee voor responsive design. Deze werken alleen voor eenvoudige lay-outs met één rij zonder kolomomloop.

Gebruik van enorme negatieve marges & opvulling
Met behulp van display:table-cell ( deze oplossing heeft ook invloed op het responsieve raster, dus een @media-query kan worden gebruikt om alleen table-weergave op bredere schermen toe te passen voordat de kolommen verticaal worden gestapeld)

Antwoord 3, autoriteit 8%

Geen JavaScript nodig. Voeg gewoon de klasse .row-eq-height toe aan uw bestaande .row op de volgende manier:

<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="https://placekitten.com/100/100">
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
    some more content
  </div>
</div>

Tip: als je meer dan 12 kolommen in je rij hebt, kan het bootstrap-raster het niet inpakken. Voeg dus een nieuwe div.row.row-eq-height toe aan elke 12 kolommen.

Tip: u moet mogelijk

. toevoegen

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

naar uw html

Antwoord 4, autoriteit 6%

Om je vraag te beantwoorden is dit alles wat je nodig hebt bekijk de volledige responsieve demo met css als voorvoegsel:

/* 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;
    }
}

Als u ondersteuning voor miniatuurinhoud flex wilt toevoegen in flexkolommen zoals de bovenstaande schermafbeelding, voegt u dit ook toe… Merk op dat u dit ook met panelen zou kunnen doen:

.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%;
}

Hoewel flexbox niet werkt in IE9 en lager, kun je de demo gebruiken met een fallback met behulp van voorwaardelijke tags met zoiets als javascript-rasters als polyfill:

<!--[if lte IE 9]>
<![endif]-->

Wat betreft de andere twee voorbeelden in het geaccepteerde antwoord… De tabeldemo is een goed idee, maar wordt verkeerd geïmplementeerd. Het specifiek toepassen van die CSS op bootstrap-kolomklassen zal zonder twijfel het rasterraamwerk volledig breken. U moet een aangepaste selector gebruiken voor één en twee. De tabelstijlen mogen niet worden toegepast op [class*='col-'] met gedefinieerde breedten. Deze methode mag ALLEEN worden gebruikt als u kolommen van gelijke hoogte EN gelijke breedte wilt. Het is niet bedoeld voor andere lay-outs en is NIET responsief. We kunnen echter terugvallen op mobiele schermen…

<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%;
    }
}

Ten slotte de eerste demo in het geaccepteerde antwoord die een versie van de één echte lay-out implementeert is een goede keuze voor sommige situaties, maar niet geschikt voor bootstrap-kolommen. De reden hiervoor is dat alle kolommen uitzetten tot de containerhoogte. Dit zal dus ook het reactievermogen verbreken, omdat de kolommen niet uitbreiden naar de elementen ernaast, maar naar de hele container. Met deze methode kun je ook geen ondermarges meer toepassen op rijen en veroorzaakt dit ook andere problemen, zoals scrollen naar verankeringstags.

Zie voor de volledige code de Codepen die automatisch de flexbox-code voorvoegt.

Antwoord 5, autoriteit 4%

U toont slechts één rij, dus uw gebruiksscenario kan tot dat beperkt zijn. Voor het geval je meerdere rijen hebt, deze plug-in – github Javascript-grids – werkt perfect! Het zorgt ervoor dat elk paneel uitbreidt naar het hoogste paneel, waardoor elke rij mogelijk een andere hoogte krijgt op basis van het hoogste paneel in die rij. Het is een jQuery-oplossing versus css, maar ik wilde het aanbevelen als een alternatieve benadering.

Antwoord 6, autoriteit 3%

Als je dit in elke browser wilt laten werken, gebruik dan javascript:

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

Antwoord 7

Ik heb veel van de suggesties in deze thread en op andere pagina’s geprobeerd, maar geen enkele oplossing werkte 100% in elke browser.

Dus ik heb behoorlijk wat geëxperimenteerd en kwam op dit uit.
Een complete oplossing voor Bootstrap Equal Height-kolommen met behulp van flexbox met slechts 1 klasse. Dit werkt in alle belangrijke browsers 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>

Om nog meer versies van IE te ondersteunen, kun je bijvoorbeeld https://github gebruiken. com/liabru/jquery-match-height en target alle onderliggende kolommen van .equal-cols. Zoals dit:

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

Zonder deze polyfill zullen de kolommen zich gedragen als de gebruikelijke Bootstrap-kolommen, dus dat is een goede fallback.

Antwoord 8

Je kunt ook inline-flex gebruiken, wat best goed werkt en misschien een beetje schoner is dan elk rij-element met CSS te wijzigen.

Voor mijn project wilde ik dat elke rij waarvan de onderliggende elementen randen dezelfde hoogte hadden, zodat de randen er gekarteld zouden uitzien. Hiervoor heb ik een eenvoudige css-klasse gemaakt.

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

Antwoord 9

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

Van:

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

Antwoord 10

Het verbaast me dat ik hier eind 2018 geen waardevolle oplossing kon vinden. Ik ging door en bedacht zelf een Bootstrap 3-oplossing met flexbox.

Schoon en eenvoudig voorbeeld:

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;
  }
}

Bekijk werkende demo: http://jsfiddle.net/5kmtfrny/

Antwoord 11

brutale jQuery-oplossing als iemand geïnteresseerd is. Zorg er wel voor dat al je cols (el) een gemeenschappelijke klassenaam hebben…werkt ook responsief als je het bindt aan $(window).resize

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});
    });
}

Gebruik

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

Opmerking: dit bericht is bewerkt volgens de opmerking van @Chris dat de code alleen op de laatste hoogste hoogte is ingesteld in de functie $.each()

Antwoord 12

Sommige van de voorgaande antwoorden leggen uit hoe je de divs dezelfde hoogte kunt geven, maar het probleem is dat wanneer de breedte te smal is, de divs niet worden gestapeld, daarom kun je hun antwoorden implementeren met een extra deel. Voor elke kunt u de hier gegeven CSS-naam gebruiken naast de rijklasse die u gebruikt, dus de div zou er als volgt uit moeten zien als u altijd wilt dat de div’s naast elkaar staan:

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

Voor alle schermen:

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

Voor als je sm wilt gebruiken:

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

Voor als je md wilt:

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

Voor als je LG wilt gebruiken:

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

BEWERKEN
Op basis van een opmerking is er inderdaad een eenvoudigere oplossing, maar u moet ervoor zorgen dat u kolominfo geeft van de grootste gewenste breedte voor alle maten tot xs (bijv. <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;
}

Antwoord 13

Als iemand bootstrap 4 gebruikt en kolommen van gelijke hoogte zoekt, gebruik dan gewoon row-eq-height naar bovenliggende 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>

Antwoord 14

Ik weet dat ik erg laat ben, maar nu kun je het stijlkenmerk ‘min-height’ gebruiken om je doel te bereiken.

Antwoord 15

hier is mijn oplossing (gecompileerde 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;
  }
}

Dus uw code zou er als volgt uitzien:

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

Dit is eigenlijk hetzelfde systeem dat u gebruikt met .col-* klassen, met dat verschil dat u .row-* klassen moet toepassen op de rij zelf.

Met .row-sm-eq worden kolommen op XS-schermen gestapeld. Als u ze niet op schermen wilt stapelen, kunt u .row-xs-eq gebruiken.

De SASS-versie die we daadwerkelijk gebruiken:

.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

Opmerking: het mengen van .col-xs-12 en .col-xs-6 in een enkele rij zou niet goed werken.

Antwoord 16

Er is een probleem met het gebruik van Oplossing 1 terwijl u deze alleen op kolommen in rijen toepast. Zou oplossing 1 willen verbeteren.

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

(Sorry, ik kan geen commentaar geven op het antwoord van Popnoodles. Ik heb niet genoeg reputaties)

Antwoord 17

Dus ja, Bootstrap 4 maakt alle cols in een rij even hoog, maar als u een rand maakt rond de inhoud binnen de rij, kan het lijken alsof de cols niet even hoog zijn!

Toen ik height: 100% toepaste op het element in de col, ontdekte ik dat ik mijn marge verloor.

Mijn oplossing is om opvulling te gebruiken op de div van de col (in plaats van een marge op het binnenste element). Vind ik leuk:

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

Het bovenstaande codevoorbeeld gebruikt Bootstrap 4.1 om een set van negen vakken met een rand te maken

Antwoord 18

Uit officiële documentatie. Misschien kun je het in jouw geval gebruiken.

Als je gelijke hoogte nodig hebt, voeg je .h-100 toe aan de kaarten.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
   <div class="card h-100">
     <div>.....</div>
  </div>
  <div class="col">
   <div class="card h-100">
     <div>.....</div>
  </div>

Antwoord 19

Beste die er is:

Github-reflex – Documenten

Werkt met bootstrap

Bijwerken:

Voeg de CSS toe
Update je 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="https://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>

Antwoord 20

Hier is mijn methode, ik heb flex gebruikt met enkele wijzigingen in de mediaquery.

  @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;
  }
}

vervolgens de klassen toegevoegd aan de ouder die nodig waren.

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

Ik gebruik responsieve breekpunten omdat flux meestal de standaard responsieve aard van bootstrap belemmert.

Antwoord 21

Ik gebruik deze supereenvoudige oplossing met clearfix, die geen bijwerkingen heeft.

Hier is een voorbeeld op 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>

En nog een voorbeeld over 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; ?>

Antwoord 22

Voor degenen die op zoek zijn naar een snelle, gemakkelijke oplossing: als je een relatief consistente set blokinhoud hebt, kan het gemakkelijker zijn om een min-hoogte op de div in te stellen die iets groter is dan het grootste blok.

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

Antwoord 23

Ik zocht naar een oplossing voor hetzelfde probleem en vond er een die gewoon werkte !! –
met bijna geen extra code..

zie https://medium.com/wdstack/bootstrap-equal- hoogte-kolommen-d07bc934eb27
voor een goed resultaat, en met de gewenste reactie onderaan, met een link.

https://www.codeply.com/go/EskIjvun4B

dit was voor mij de juiste manier om…
een citaat:
…
3 Gebruik flexbox (beste!)

Vanaf 2017 is CSS3 flexbox de beste (en gemakkelijkste) manier om kolommen van gelijke hoogte te maken in een responsief ontwerp.

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

en gebruik gewoon:

div class="container">
   <div class="row display-flex .... etc..

Antwoord 24

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

waarbij .container-height de stijlklasse is die moet worden toegevoegd aan een .row-stijlelement waaraan alle .col*-kinderen dezelfde hoogte hebben.

Als u deze stijlen alleen toepast op een specifieke .row (met .container-height, zoals in het voorbeeld) wordt ook voorkomen dat de marge en opvulling worden toegepast op alle .col*.

Antwoord 25

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

Voorbeeld:

https://jsfiddle.net/b9chris/njcnex83/embedded/result/

Aangepast van verschillende antwoorden hier. De op flexbox gebaseerde antwoorden zijn de juiste manier zodra IE8 en 9 dood zijn, en zodra Android 2.x dood is, maar dat is niet waar in 2015, en zal waarschijnlijk niet in 2016 zijn. IE8 en 9 vormen nog steeds 4- 6% van het gebruik, afhankelijk van hoe je meet, en voor veel zakelijke gebruikers is het veel erger. http://caniuse.com/#feat=flexbox

De display: table, display: table-cell truc is meer achterwaarts compatibel – en een groot voordeel is dat het enige serieuze compatibiliteitsprobleem een Safari-probleem is waarbij het dwingt box-sizing: border-box af, iets dat al op je Bootstrap-tags is toegepast. http://caniuse.com/#feat=css-table

Je kunt natuurlijk meer klassen toevoegen die vergelijkbare dingen doen, zoals .equal-height-md. Ik heb deze aan div’s gekoppeld voor het kleine prestatievoordeel in mijn beperkte gebruik, maar je zou de tag kunnen verwijderen om het meer algemeen te maken, zoals de rest van Bootstrap.

Merk op dat de jsfiddle hier CSS gebruikt, en dus zijn de dingen die Less anders zou bieden hard gecodeerd in het gekoppelde voorbeeld. @screen-sm-min is bijvoorbeeld vervangen door wat Less zou invoegen – 768px.

Antwoord 26

Als het in jouw context logisch is, kun je na elke pauze eenvoudig een lege 12-koloms div toevoegen, die fungeert als een scheidingslijn die de onderkant van de hoogste cel in je rij omhelst.

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

Antwoord 27

19/03/2019

**Bootstrap 4 oplossing van gelijke hoogte **

Bootstrap Utilities/flex voor gelijke hoogte

Live voorbeeld in Codepen

Gelijke hoogte volgens bootstrap-klasse met bovenliggende div vaste height of min-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>

Antwoord 28

Ik dacht eraan toe te voegen dat het antwoord van Dr.Flink ook kan worden toegepast op een Bootstrap 3 form-horizontal-blok – wat erg handig kan zijn als je achtergrondkleuren wilt gebruiken voor elke cel. Om dit te laten werken voor bootstrap-formulieren, moet u de formulierinhoud omwikkelen die alleen dient om een tabelachtige structuur te repliceren.

Het onderstaande voorbeeld biedt ook de CSS die een extra mediaquery demonstreert waarmee Bootstrap 3 het eenvoudig kan overnemen en zijn normale gang van zaken kan doen op het kleinere scherm(en). Dit werkt ook in IE8+.

Voorbeeld:

<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;
  }
}

Antwoord 29

Probeer dit via 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>

Antwoord 30

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; }

$('.option2').css({
    'height': $('.option2').height()
});

Previous articleWat is de gemakkelijkste/beste/meest correcte manier om door de karakters van een string in Java te bladeren?

Next articleTekenreeks converteren naar hoofdlettergebruik met JavaScript

Hoe kan ik Bootstrap-kolommen allemaal even hoog maken?

Antwoord 1, autoriteit 100%

Antwoord 2, autoriteit 34%

Update 2021

Bootstrap 4 + 5

Antwoord 3, autoriteit 8%

Antwoord 4, autoriteit 6%

Antwoord 5, autoriteit 4%

Antwoord 6, autoriteit 3%

Antwoord 7

Antwoord 8

Antwoord 9

Antwoord 10

Antwoord 11

Gebruik

Antwoord 12

Antwoord 13

Antwoord 14

Antwoord 15

Antwoord 16

Antwoord 17

Antwoord 18

Antwoord 19

Github-reflex – Documenten

Antwoord 20

Antwoord 21

Antwoord 22

Antwoord 23

Antwoord 24

Antwoord 25

Antwoord 26

Antwoord 27

Antwoord 28

Antwoord 29

Antwoord 30

LEAVE A REPLY Cancel reply

Other episodes