Come posso rendere le schede Bootstrap 4 tutte della stessa altezza?

Question

Sto usando Bootstrap 4 alpha 2 e sto sfruttando le carte. In particolare, sto lavorando con this example preso dai documenti ufficiali. Come dice il titolo, come posso rendere tutte le carte della stessa altezza?

EDIT: Tutto quello che posso pensare è ormai impostando la seguente regola CSS:

.card { 
    min-height: 200px; 
} 

Ma questa è solo una soluzione hard coded che non funziona nel caso generale. Il codice a mio avviso è la stessa di quella del docs cioè:

<div class="card-columns"> 
    <div class="card"> 
    <img class="card-img-top" data-src="..." alt="Card image cap"> 
    <div class="card-block"> 
     <h4 class="card-title">Card title that wraps to a new line</h4> 
     <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> 
    </div> 
    </div> 
    <div class="card card-block"> 
    <blockquote class="card-blockquote"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> 
     <footer> 
     <small class="text-muted"> 
      Someone famous in <cite title="Source Title">Source Title</cite> 
     </small> 
     </footer> 
    </blockquote> 
    </div> 
    <div class="card"> 
    <img class="card-img-top" data-src="..." alt="Card image cap"> 
    <div class="card-block"> 
     <h4 class="card-title">Card title</h4> 
     <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> 
     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> 
    </div> 
    </div> 
    <div class="card card-block card-inverse card-primary text-xs-center"> 
    <blockquote class="card-blockquote"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> 
     <footer> 
     <small> 
      Someone famous in <cite title="Source Title">Source Title</cite> 
     </small> 
     </footer> 
    </blockquote> 
    </div> 
    <div class="card card-block text-xs-center"> 
    <h4 class="card-title">Card title</h4> 
    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> 
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> 
    </div> 
    <div class="card"> 
    <img class="card-img" data-src="..." alt="Card image"> 
    </div> 
    <div class="card card-block text-xs-right"> 
    <blockquote class="card-blockquote"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> 
     <footer> 
     <small class="text-muted"> 
      Someone famous in <cite title="Source Title">Source Title</cite> 
     </small> 
     </footer> 
    </blockquote> 
    </div> 
    <div class="card card-block"> 
    <h4 class="card-title">Card title</h4> 
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> 
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> 
    </div> 
</div> 

Answer 1

Il Bootstrap 4 card-columns utilizza colonne CSS3 che in realtà non supportano altezze uguali (ad eccezione del riempimento di colonne, che è solo supposto in Firefox).

Se si abilita invece la modalità Flexbox di Bootstrap 4, è possibile utilizzare lo card-deck e un piccolo CSS per equalizzare l'altezza e avvolgere ogni 3 colonne.

@media (min-width:34em) { 
    .card-deck > .card 
    { 
     width: 29%; 
     flex-wrap: wrap; 
     flex: initial; 
    } 
} 

http://codeply.com/go/YFFFWHVoRB

UPDATE: In Bootstrap 4, FlexBox è ora predefinito, e ogni scheda-deck conterrebbe non più di 3 carte (margini della carta sono recentemente cambiato): http://www.codeply.com/go/x91w5Cl6ip

Answer 2

jsfiddle

Basta aggiungere l'altezza desiderata con i CSS, ad esempio:

.card{ 
    height: 350px; 
} 

È dovrà aggiungere il proprio CSS.

Se si controlla la documentazione, questo è per Massoneria stile - il punto di questo è che non sono tutti della stessa altezza.

Answer 3

Ho seguito un approccio leggermente diverso. Utilizzando il Card Deck wrapper

ho aggiunto una regola di stile che limita l'altezza del blocco di carta:

.card .card-block {max-height:300px;overflow:auto;} 

Questo il seguente risultato:

Answer 4

Ecco come ho fatto:

CSS:

.my-flex-card > div > div.card { 
    height: calc(100% - 15px); 
    margin-bottom: 15px; 
} 

HTML:

<div class="row my-flex-card"> 
    <div class="col-lg-3 col-sm-6"> 
     <div class="card"> 
      <div class="card-block"> 
       aaaa 
      </div> 
     </div> 
    </div> 
    <div class="col-lg-3 col-sm-6"> 
     <div class="card"> 
      <div class="card-block"> 
       bbbb 
      </div> 
     </div> 
    </div> 
    <div class="col-lg-3 col-sm-6"> 
     <div class="card"> 
      <div class="card-block"> 
       cccc 
      </div> 
     </div> 
    </div> 
    <div class="col-lg-3 col-sm-6"> 
     <div class="card"> 
      <div class="card-block"> 
       dddd 
      </div> 
     </div> 
    </div> 
</div> 

Answer 5

Se qualcuno è interessato, v'è un plugin jQuery chiamato: jquery.matchHeight.js

https://github.com/liabru/jquery-match-height

matchHeight rende l'altezza di tutti gli elementi selezionati esattamente uguali. Gestisce molti casi limite che causano il fallimento di plug-in simili.

Per una fila di carte, io uso:

<div class="row match-height"> 

quindi attivare a livello di sito:

$('.row.match-height').each(function() { 
    $(this).find('.card').not('.card .card').matchHeight(); // Not .card .card prevents collapsible cards from taking height 
}); 

Answer 6

è possibile mettere le classi sulla "riga" o la "colonna" ? Non sarà visibile sulle carte (bordo) se lo si usa sulla riga. https://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items

<div class="container"> 
    <div class="row"> 
      <div class="col-lg-4 d-flex align-items-stretch"> 

Alcune delle altre risposte qui sembrano 'stravagante'. Perché usare un'altezza minima o anche peggio un'altezza fissa?

Ho pensato che questo problema (altezze uguali) era parte del motivo per la progressione lontano dai div di blocco fluttuante?

Answer 7

Sto utilizzando Bootstrap 4 (Beta 2). Nel frattempo le situazioni sembrano essere cambiate. Ho avuto lo stesso problema e ho trovato una soluzione facile. Questo è il mio codice:

<div class="container-fluid content-row"> 
    <div class="row"> 
     <div class="col-sm-12 col-lg-6"> 
      <div class="card h-100"> 
       … content card … 
      </div> 
     </div> 
     … all the other cards … 
    </div> 
</div> 

Con "col-sm-12 col-lg-6" ho fatto le carte reattivo. Con "carta h-100" ho impostato tutte le carte all'altezza della colonna genitore. Sul mio sistema funziona, ma non sono un professionista. Quindi, spero di aver aiutato qualcuno.

Answer 8

avvolgere le carte all'interno

<div class="card-group"></div>

o

<div class="card-deck"></div>

Answer 9

migliore soluzione, Bootstrap 4 ha tutto il necessario: utilizzare la classe .de-flex e .flex-fill. Non usare i mazzi di carte.

Ecco la bestia:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet"> 
 
<div class="container"> 
 
    <div class="row my-4"> 
 
    <div class="col"> 
 
     <div class="jumbotron"> 
 
     <h1>Bootstrap 4 Cards all same height demo</h1> 
 
     <p class="lead">by djibe.</p> 
 
     <span class="text-muted">(thx to BS4)</span> 
 
     <p>Dependencies : standard BS4</p> 
 
     <p> 
 
      Enjoy the magic of flexboxes and leave the useless card-decks. 
 
     </p> 
 
     <div class="container-fluid"> 
 
      <div class="row"> 
 
      <div class="col-sm d-flex"> 
 
       <div class="card card-body flex-fill"> 
 
       A small card content. 
 
       </div> 
 
      </div> 
 
      <div class="col-sm d-flex"> 
 
       <div class="card card-body flex-fill"> 
 
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
       in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
 
       </div> 
 
      </div> 
 
      <div class="col-sm d-flex"> 
 
       <div class="card card-body flex-fill"> 
 
       Another small card content. 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>