Come posso rendere le colonne Bootstrap tutte della stessa altezza?


965

Sto usando Bootstrap. Come posso rendere tre colonne tutte della stessa altezza?

Ecco uno screenshot del problema. Vorrei che le colonne blu e rosse fossero della stessa altezza della colonna gialla.

Tre colonne bootstrap con la colonna centrale più lunga delle altre due colonne

Ecco il codice:

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



11
C'è un articolo nel sito di bootstrap con una soluzione a 5 righe getbootstrap.com.vn/examples/equal-height-columns
Eduard Gamonal

2
L'esempio su Bootstrap rompe la reattività Eduard. .rowManca il flex flex-wrap: wrap;. Ecco un esempio di come funziona con reattività: codepen.io/bootstrapped/details/RrabNe
Bryan Willis

Possibile soluzione alternativa - Un'immagine trasparente larga 1 pixel nelle altre colonne. Questa nuova immagine della larghezza di un pixel corrisponde all'altezza in pixel della foto dei gatti nell'esempio sopra. (Potrebbe non funzionare o essere pratico nella tua situazione)
Sql Surfer

In Bootstrap 4, possiamo usare la carta per lo stesso
Amjad Rehman A

Risposte:


1045

Soluzione 4 utilizzando Bootstrap 4

Bootstrap 4 utilizza Flexbox, quindi non è necessario un CSS aggiuntivo.

dimostrazione

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

Soluzione 1 utilizzando margini negativi (non rompe la reattività)

dimostrazione

.row{
    overflow: hidden; 
}

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

Soluzione 2 utilizzando la tabella

dimostrazione

.row {
    display: table;
}

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

La soluzione 3 che utilizza flex ha aggiunto agosto 2015. I commenti pubblicati prima non si applicano a questa soluzione.

dimostrazione

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

7
Pensala come la colonna che viene risucchiata nello spazio negativo. Se rimuovi l'overflow, vedrai cosa sta succedendo.
Popnoodles,

9
Se hai come target specifico la classe di colonne bootstrap, dovresti probabilmente usare un anchor ^ anziché un carattere jolly *. Usando ^ si dirà che la classe deve iniziare con col- dove come il carattere jolly mostrato corrisponderà a qualsiasi classe con col- dovunque nella stringa, possibilmente con effetti indesiderati sugli stili in cui potresti aver usato la convenzione col-. (ad es. roba morente).
Logan G.

7
Bella risposta, con alcuni avvertimenti. La soluzione 1 disabilita il float e quindi interrompe il comportamento reattivo della griglia di bootstrap. La soluzione 2 (spiegata in modo più approfondito in positioniseverything.net/articles/onetruelayout/equalheight ) non mostra il bordo inferiore (poiché è ritagliato da qualche parte nello spazio di riempimento).
Ohad Schneider,

14
La soluzione 3 rompe la reattività delle file.
SPRBRN,

10
@Popnoodles dovresti aggiungere flex-wrap: wrap;al terzo esempio per abilitare la reattività. Dovrai anche aggiungere display: flex; direzione flessibile: colonna; alla classe di colonna. Se stai per utilizzare .row e non una classe personalizzata, dovrai fornire un fallback per i browser più vecchi che cambiano il display flessibile. Ecco un esempio
Bryan Willis,

321

Aggiornamento 2020

Il miglior approccio per Bootstap 3.x : usare CSS flexbox (e richiede un CSS minimo).

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

Esempio di flexbox Bootstrap della stessa altezza

Per applicare la stessa flexbox della stessa altezza a punti di interruzione specifici (reattivo), utilizzare una query multimediale. Ad esempio, ecco sm(768px) e versioni successive:

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

Questa soluzione funziona anche su più righe (a capo automatico):
https://www.bootply.com/gCEXzPMehZ

Altre soluzioni alternative

Queste opzioni saranno consigliate da altri, ma non sono una buona idea per un design reattivo. Funzionano solo per semplici layout a riga singola senza avvolgimento di colonne.

1) Utilizzo di enormi margini negativi e riempimento

2) Utilizzo di display: table-cell (questa soluzione influisce anche sulla griglia reattiva, quindi una query @media può essere utilizzata per applicare la tablevisualizzazione solo su schermi più ampi prima che le colonne si impilino verticalmente)


Bootstrap 4

Flexbox è ora utilizzato di default in Bootstrap 4, quindi non è necessario che il CSS aggiuntivo crei colonne di uguale altezza: http://www.codeply.com/go/IJYRI4LPwU

Esempio:

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

5
È possibile utilizzare una query multimediale per applicare il flexbox solo su dispositivi più grandi / più grandi. Ho aggiornato il bootply: bootply.com/Cn6fA6LuTq
Zim

Nel caso qualcuno fosse interessato, ho creato una penna per dimostrare effetti simili su un modulo usando flexbox.
Justin Lau,

2
È un bug Safari noto con flexbox: proof: bugs.webkit.org/show_bug.cgi?id=137730
Zim

5
@Stanley il commento su "non risponde più" è vecchio e irrilevante.
Zim,

1
Questa è l'unica soluzione che ha funzionato per me. Grazie Zim, questo è fantastico!
Ryan NZ,

83

Non è necessario JavaScript. Basta aggiungere la classe .row-eq-heightal tuo esistente .rowproprio in questo modo:

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

Suggerimento: se nella riga sono presenti più di 12 colonne, la griglia del bootstrap non riuscirà a racchiuderla. Quindi aggiungi un nuovo div.row.row-eq-heightogni 12 colonne.

Suggerimento: potrebbe essere necessario aggiungere

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

al tuo html


5
FlexBox-based. Non funziona in IE8 o 9, né Android 2.x caniuse.com/#feat=flexbox
Chris Moschini,

60
Nota: getbootstrap.vn non è "Bootstrap". È un progetto di terze parti.
Zim

Questo sembra essere integrato in bootstrap v4 però.
Cyril Duchon-Doris,

Ho incluso il CSS corretto (dal sito .vn) ma rovina tutto. è basato su flex
ekkis il

Ottimo ... inferno plug-in.
Armada,

63

Per rispondere alla tua domanda è tutto ciò di cui hai bisogno per vedere la demo reattiva completa con CSS prefissato :

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

Schermata di Codepen

Per aggiungere il supporto per il contenuto flessibile in miniatura all'interno di colonne flessibili come lo screenshot sopra, aggiungi anche questo ... Nota che puoi farlo anche con i pannelli:

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

Mentre flexbox non funziona in IE9 e sotto, puoi usare la demo con un fallback usando tag condizionali con qualcosa come griglie javascript come polyfill:

<!--[if lte IE 9]>

<![endif]-->

Per quanto riguarda gli altri due esempi nella risposta accettata ... La demo del tavolo è un'idea decente ma è stata implementata in modo errato. Applicare che CSS sulle classi di colonne bootstrap specificatamente romperà del tutto il framework della griglia. Dovresti usare un selettore personalizzato per uno e due stili a cui le tabelle non devono essere applicate con [class*='col-']larghezze definite. Questo metodo deve essere utilizzato SOLO se si desidera colonne di uguale altezza E larghezza uguale. Non è pensato per altri layout e NON è reattivo. Possiamo ripristinarlo tuttavia su display mobili ...

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

Infine, la prima demo nella risposta accettata che implementa una versione del layout vero è una buona scelta per alcune situazioni, ma non adatta per le colonne bootstrap. Il motivo è che tutte le colonne si espandono all'altezza del contenitore. Quindi, questo romperà anche la reattività poiché le colonne non si espandono agli elementi accanto a loro, ma all'intero contenitore. Questo metodo non ti consentirà inoltre di applicare più i margini inferiori alle righe e causerà anche altri problemi lungo il percorso come lo scorrimento dei tag di ancoraggio.

Per il codice completo vedere Codepen che prefigura automaticamente il codice flexbox.


11
Questa è l'unica risposta che ha funzionato per me. Le 3 risposte più votate erano solo una perdita di tempo
ken2k

3
Sembra buono, ma sfortunatamente non funziona in Safari 9.1 su MacOS :-(
KevinH,

1
@TheSchecke ecco la soluzione. Per quanto ne so, questo funziona ora su tutti i browser supportati da flexbox. Per favore fatemi sapere se sbaglio. s.codepen.io/bootstrapped/debug/pboJNd . Il problema riguardava il fatto di row:after, row:beforeavere display: set di tavoli che apparentemente a Safari non piace.
Bryan Willis,

2
Solo un avvertimento che questo si rompe davvero male sul browser Safari dell'iPad
Matthew Lock

1
Mi dispiace che @MatthewLock. Ho appena provato il mio IPad Air IOS 8.1 con l'ultimo safari e funziona su questo. Sono stato anche in grado di testare su crossbrowsertesting.com usando iPad mini retina con Safari 7 e anche quello sembra funzionare bene. Ecco i risultati di quel test. Puoi fornire la versione per iPad e Safari che stai utilizzando? Mi piacerebbe provare a ottenere questo risolto al più presto o almeno inserire un commento nella risposta poiché so che molte persone lo stanno usando.
Bryan Willis,

42

Mostra solo una riga, quindi il tuo caso d'uso potrebbe essere limitato a questo. Nel caso abbiate più righe, questo plugin - github Javascript-grids - funziona perfettamente! Rende ogni pannello espandibile al pannello più alto, dando ad ogni riga potenzialmente un'altezza diversa in base al pannello più alto di quella fila. È una soluzione jquery vs. CSS, ma volevo raccomandarlo come approccio alternativo.


1
L'unica soluzione che funziona davvero e non rompe la reattività
Artur Kędzior,

Questo ti consente di specificare che le colonne devono essere quadrate - o solo della stessa altezza?
Niico,

@niico 14 - è passato un po 'di tempo da quando l'ho usato, ma nella mia applicazione il requisito è che gli elementi in ogni riga avessero la stessa altezza, ma l'altezza potrebbe variare da riga a riga. Poiché l'altezza è una funzione degli elementi nella riga, se l'altezza dell'elemento è uguale alla loro larghezza, dovrebbero presentarsi come quadrati.
globalSchmidt

30

Se vuoi farlo funzionare in qualsiasi browser, usa javascript:

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

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

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

1
Avere una div class = "row" con un numero variabile di pannelli ciascuno della classe "col-md-4" che dovrebbe darmi 3 colonne e un numero sconosciuto di righe, a seconda del numero di elementi che voglio elencare. Questo JS ha funzionato e richiede un cambiamento minimo nel mio HTML / CSS, al contrario di varie cose CSS che ho provato. L'unica cosa che ho cambiato è stata quella di contrassegnare tutti i miei pannelli colonna con classe aggiuntiva, ad esempio "pannello della stessa altezza" e quindi usare $ (". Pannello della stessa altezza") invece di $ ("
.pannello

1
L'unica soluzione che ha funzionato per me dopo un giorno di sperimentazione di materiale CSS.
Dinosaurius,

1
Questa è una buona soluzione, ma .ready()non è il momento giusto per chiamarla - dovrebbe essere chiamata.load()
jave.web

1
@ jave.web Se pensi che questa sia una buona soluzione, ti preghiamo di dare un pollice in su. Grazie
paulalexandru il

Usa window.onload = function() {...function content above...}invece. Funziona meglio.
Blackpanther0001,

10

Ho provato molti dei suggerimenti forniti in questo thread e in altre pagine, ma nessuna soluzione ha funzionato al 100% in tutti i browser.

Quindi ho sperimentato un bel po 'di tempo e ho pensato a questo. Una soluzione completa per colonne Bootstrap a uguale altezza con l'aiuto di flexbox con solo 1 classe. Funziona con tutti i principali browser 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>

Per supportare ancora più versioni di IE è possibile, ad esempio, utilizzare https://github.com/liabru/jquery-match-height e scegliere come target tutte le colonne figlio di .equal-cols. Come questo:

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

Senza questo polyfill le colonne si comporteranno come al solito colonne Bootstrap, il che è un fallback abbastanza buono.


Questo ha funzionato brillantemente per me. Grazie!
randlet

8

Puoi anche usare inline-flex che funziona abbastanza bene e può essere un po 'più pulito rispetto alla modifica di ogni elemento di riga con CSS.

Per il mio progetto volevo che ogni riga con elementi figlio avesse i bordi della stessa altezza in modo che i bordi sembrassero frastagliati. Per questo ho creato una semplice classe css.

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

2
Mentre riesce a rendere tutti i contenuti della riga della stessa altezza; Questo rompe la reattività di Bootstrap.
Christine268,


7

soluzione sfacciata jquery se qualcuno è interessato. Assicurati solo che tutti i tuoi cols (el) abbiano un nome di classe comune ... funzioni anche in modo reattivo se lo leghi a $ (finestra) .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});
    });
}

uso

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

Nota: questo post è stato modificato secondo il commento di @Chris secondo cui il codice è stato impostato solo sull'ultima altezza più alta nella $.each()funzione


Questo è sottovalutato: semplice e piccolo ridimensionerà tutte le colonne senza la necessità di avere un numero fisso di colonne in una riga. Ben fatto!
Jordon,

1
Questo non funziona, perché hai impostato l'ultima altezza massima in ciascuna funzione. Se la terza colonna è la colonna più alta, le colonne 1 e 2 non ottengono la giusta altezza. Devi impostare l'ultima riga "$ (this) .css ({'height': h});" dopo ciascuna funzione. Farò una modifica.
Chris,

7

Alcune delle risposte precedenti spiegano come rendere i div della stessa altezza, ma il problema è che quando la larghezza è troppo stretta i div non si accumulano, quindi puoi implementare le loro risposte con una parte in più. Per ognuno puoi usare il nome CSS indicato qui in aggiunta alla classe di riga che usi, quindi il div dovrebbe assomigliare a questo se vuoi sempre che i div siano uno accanto all'altro:

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

Per tutti gli schermi:

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

Per quando vuoi usare sm:

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

Per quando vuoi md:

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

Per quando vuoi usare lg:

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

EDIT Sulla base di un commento, esiste davvero una soluzione più semplice, ma è necessario assicurarsi di fornire le informazioni sulla colonna dalla larghezza massima desiderata per tutte le dimensioni fino a xs (ad esempio <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;
}

Lo hai reso molto più complicato del necessario :) `Basta usare, flex-wrap: wrap;quindi non hai bisogno di tutti quelli separati ... a meno che tu non li desideri specificamente.
Bryan Willis,

questo fallisce su Safari Safari
Matthew Lock

6

Sono sorpreso di non aver potuto trovare una soluzione utile qui alla fine del 2018. Sono andato avanti e ho capito da solo una soluzione Bootstrap 3 utilizzando Flexbox.

Esempio semplice e pulito:

Esempio di larghezza di colonna abbinata 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;
  }
}

Visualizza la demo funzionante: http://jsfiddle.net/5kmtfrny/


5

So di essere in ritardo, ma ora puoi utilizzare l'attributo di stile "altezza minima" per raggiungere il tuo scopo.


5

Se qualcuno usa bootstrap 4 e cerca colonne di uguale altezza basta usare il row-eq-heightdiv genitore

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

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


3

ecco la mia soluzione (CSS compilato):

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

Quindi il tuo codice sarebbe simile a:

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

Fondamentalmente questo è lo stesso sistema che usi con le .col-*classi con quella differenza che devi applicare le .row-*classi alla riga stessa.

Con le .row-sm-eqcolonne verranno impilati sugli schermi XS. Se non ti servono per essere impilati su qualsiasi schermo che puoi usare .row-xs-eq.

La versione SASS che effettivamente utilizziamo:

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

Dimostrazione dal vivo


Nota: il missaggio .col-xs-12e .col-xs-6all'interno di una singola riga non funzionerebbe correttamente.


Questo è buono. La mia soluzione è la stessa. E c'è la possibilità di avere colonne di uguale altezza con gli spazi standard di 30stx di Bootstrap tra le colonne usando border-spacinge i margini negativi.
massimo

3

Si è verificato un problema con l'utilizzo della soluzione 1 durante l'applicazione sulla sola colonna delle righe. Vorrei migliorare la soluzione 1.

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

(Mi dispiace, non posso commentare la risposta di Popnoodles. Non ho abbastanza reputazione)


2

Il migliore là fuori:

Riflesso di Github - Doc

Funziona con bootstrap

Aggiornare:

  1. Includi il CSS
  2. Aggiorna il tuo codice:

/*!
 *
 * 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: ldjordan@gmail.com
 * 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>


Benvenuto in Stack Overflow! Sebbene questo collegamento possa rispondere alla domanda, è meglio includere qui le parti essenziali della risposta e fornire il collegamento come riferimento. Le risposte di solo collegamento possono diventare non valide se la pagina collegata cambia. Vedi Come posso scrivere una buona risposta .
ByteHamster

2

Ecco il mio metodo, ho usato flex con alcune modifiche nella media query.

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

quindi ha aggiunto le classi al genitore che erano richieste.

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

Sto usando i breakpoint reattivi perché il flusso di solito ostacola la natura reattiva standard del bootstrap.


2

Uso questa soluzione super facile con clearfix, che non ha effetti collaterali.

Ecco un esempio su 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>

E un altro esempio su 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; ?>

Tuttavia, ciò non rende le colonne tutte della stessa altezza.
skerit,

1
Per me voler avere colonne alla stessa altezza / posto in fila è una soluzione
Michal - wereda-net

2

Per chi è alla ricerca di una soluzione rapida e semplice: se si dispone di un set relativamente consistente di contenuto del blocco che imposta un'altezza minima sul div un po 'più grande del blocco più grande, può essere più facile da implementare.

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

2

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

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

dove .container-height è la classe di stile che deve essere aggiunta a un elemento in stile .row a cui tutti i suoi figli .col * hanno la stessa altezza.

L'applicazione di questi stili solo a un certo .row (con .container-height, come nell'esempio) evita anche di applicare il margine e il riempimento di riempimento a tutti i .col *.


2

Ho cercato una soluzione allo stesso problema e ne ho trovato uno funzionante !! - con quasi nessun codice aggiuntivo ..

vedere https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 per un buon errore, e con il resposne che vuoi in fondo, con un link.

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

questo è stato il modo reattivo corretto per me ... un preventivo: ... 3 - Usa la flexbox (la migliore!)

A partire dal 2017, il modo migliore (e più semplice) per creare colonne di uguale altezza in un design reattivo è utilizzare CSS3 flexbox.

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

e usa semplicemente:

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

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>

Esempio:

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

Adattato da diverse risposte qui. Le risposte basate su flexbox sono nel modo giusto una volta che IE8 e 9 sono morti e una volta che Android 2.x è morto, ma questo non è vero nel 2015 e probabilmente non lo sarà nel 2016. IE8 e 9 continuano a costituire 4- 6% di utilizzo a seconda di come si misura e per molti utenti aziendali è molto peggio. http://caniuse.com/#feat=flexbox

Il display: table, display: table-celltrucco è backwards-compatible di più - e una cosa grande è il problema di compatibilità unico serio è un problema di Safari in cui le forze box-sizing: border-box, qualcosa di già applicata ai tag Bootstrap. http://caniuse.com/#feat=css-table

Puoi ovviamente aggiungere più classi che fanno cose simili, come .equal-height-md. Li ho legati ai div per il piccolo vantaggio in termini di prestazioni nel mio uso limitato, ma è stato possibile rimuovere il tag per renderlo più generalizzato come il resto di Bootstrap.

Nota che jsfiddle qui usa CSS, e quindi, le cose che meno fornirebbe altrimenti sono codificate nell'esempio collegato. Ad esempio, @ screen-sm-min è stato sostituito con ciò che Less inserisce: 768px.


1

Se ha senso nel tuo contesto, puoi semplicemente aggiungere un div vuoto a 12 colonne dopo ogni interruzione, che funge da divisore che abbraccia il fondo della cella più alta della riga.

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

Spero che sia di aiuto!


Questo non risponde alla domanda che ha posto!
Ellisan,

0

Ho pensato di aggiungere che la risposta data da Dr.Flink può anche essere applicata a un form-horizontalblocco Bootstrap 3 , il che può essere molto utile se si desidera utilizzare i colori di sfondo per ogni cella. Affinché ciò funzioni per i moduli bootstrap, è necessario racchiudere il contenuto del modulo che serve solo per replicare una struttura simile a una tabella.

L'esempio seguente fornisce anche il CSS che dimostra che una query media aggiuntiva consente a Bootstrap 3 di acquisire semplicemente e fare le cose normali su schermi più piccoli. Questo funziona anche in IE8 +.

Esempio:

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

0

Prova questo tramite 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/


0

Quindi sì, Bootstrap 4 rende tutti i col in una riga uguale all'altezza, tuttavia se stai creando un bordo attorno al contenuto all'interno della riga potresti scoprire che sembra che i col non abbiano le stesse altezze!

Quando ho applicato height: 100%l'elemento all'interno della colonna ho scoperto che ho perso il mio margine.

La mia soluzione è quella di usare il padding sul div del col (invece di un margine sull'elemento interno). Così:

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

L'esempio di codice sopra riportato utilizza Bootstrap 4.1 per creare un set di nove caselle con un bordo


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

0

2019/03/19

** Soluzione Bootstrap 4 uguale altezza **

Bootstrap Utilities / flex per uguale altezza

Esempio live in Codepen

Altezza uguale per classe bootstrap con div parent fisso heightomin-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>


3
Perché mi dai il voto negativo. puoi fare un commento per questo?
MD Ashik,

-1

Puoi avvolgere le colonne all'interno di un div

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

Non ha funzionato per me con un pulsante in una delle colonne.
Ray Hunter,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.