Come rendere le carte Bootstrap 4 della stessa altezza nelle colonne delle carte?

134

Sto usando Bootstrap 4 alpha 2 e sto sfruttando le carte. Nello specifico, sto lavorando con questo esempio tratto dai documenti ufficiali. Come posso fare in modo che tutte le carte abbiano la stessa altezza?

Tutto quello che posso pensare a questo punto è impostare la seguente regola CSS:

.card {
    min-height: 200px;
}

Ma questa è solo una soluzione hardcoded che non funzionerà in un caso generale. Il codice a mio avviso è lo stesso di quello nei documenti, ovvero:

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

— blueSurfer
fonte

Qualche tentativo finora? Qualche codice da condividere?

— baao

2

Questo esempio è per colonne in muratura. Il punto centrale di quello stile è che le carte sono diverse altezze. Usa un mazzo e abilita la modalità flexbox se vuoi altezze uguali.

— Quentin

1

Il mazzo funziona solo per le carte di fila. Quello che voglio è lo stesso effetto dicard-columns ma mantenere la stessa altezza.

— blueSurfer

163

Puoi mettere le classi sulla "riga" o sulla "colonna"? Non sarà visibile sulle carte (bordo) se lo usi 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 "stravaganti". Perché usare un'altezza minima o peggio ancora un'altezza fissa?

Pensavo che questo problema (altezze uguali) fosse parte del motivo della progressione lontano dai div in blocco mobile?

— Kerry7777
fonte

3

h-100 non è un'altezza fissa, è un'altezza al 100% (della riga)

— konyak

questa dovrebbe essere la risposta

— ACed

Questa è la vera risposta

— Andrew Bullock

@konyak yeah, mi rendo conto che amico. Non mi riferisco a h-100 (scorri in basso questa pagina).

— Kerry7777

139

Sto usando 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 reso le carte reattive. Con "card h-100" ho impostato tutte le carte all'altezza della loro colonna genitore. Sul mio sistema funziona, ma non sono un professionista. Quindi, spero di aver aiutato qualcuno.

— user3350279
fonte

16

così semplice h-100

— PNC

9

.h-100 - brillante

— JCraine

2

Questo ha funzionato per me quando ha d-flexcausato problemi con IE (che devo supportare). Ho appena aggiunto un mb-4al div genitore per separare un po 'di più le carte.

— Charles Paske

e puoi anche usare .pre-scrollable per farlo scorrere verticalmente

— Muhammad Waqas Aziz

Aggiungerei la classe .py-2 a tutti i div con la classe .col- * per aggiungere il riempimento tra le righe.

— konyak

93

La migliore soluzione, Bootstrap 4 ha tutto ciò di cui hai bisogno: USA THE .d-flexe .flex-fillclass. Non usare card-decksperché non rispondono. Ho usato col-sm, puoi usare la .colclasse che vuoi o usarecol-lg-x la x significa il numero di colonne di larghezza, ad esempio 4 o 3 per una migliore visualizzazione se il post ha molti quindi 3 o 4 per colonna

Ecco la bestia, prova a ridurre la finestra del browser a XS per vederla in azione:

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

Espandi lo snippet

— djibe
fonte

1

Questa risposta funziona alla grande! Se non puoi utilizzare "card-column" o "card-deck" per ottenere il comportamento reattivo desiderato in tutte le finestre.

— Getsomepeaches

Questo ha funzionato per me. Ho una colonna con una grande carta e a destra un'altra colonna con due righe. quindi, la carta di sinistra prende l'altezza delle due file adiacenti, grazie!

— Erich García

Questa era la strada da percorrere. Ho provato card-columns ma non potevo richiedere più di 3 colonne per riga. Grazie per questa risposta

— Yeku Wilfred Chetat

il mazzo di carte non funzionava nel mio caso, la tua risposta ha funzionato!

— TBG

31

Puoi applicare la classe h-100, che sta per altezza 100%.

— bsesic
fonte

12

AGGIORNAMENTO: In Bootstrap 4 , flexbox è ora predefinito e ogni card-deckriga conterrà 3 carte. Le carte si riempiranno a tutta altezza.

http://www.codeply.com/go/x91w5Cl6ip

Bootstrap 4 alpha card-columnsutilizza colonne CSS3 che in realtà non supportano altezze uguali (eccetto il riempimento delle colonne che è supportato solo in Firefox).

Se invece abiliti la modalità flexbox di Bootstrap 4, potresti invece usare card-decke un po 'di 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

Scheda Bootstrap correlata
della stessa altezza in Col

— Zim
fonte

Ho biforcato il tuo codice per provare qualcosa; Ho bisogno che anche i titoli si estendano alla stessa altezza, cosa che non accade qui: codeply.com/go/fqnQZ2ZGJy - sappi in qualche modo in cui posso far sì che i miei "titoli più corti" prendano la stessa altezza del titolo più lungo? Ho provato a giocare con flexbox e griglie ma non riesco a farlo bene.

— davewoodhall

11

Ecco come l'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>

— tacca
fonte

4

avvolgere le carte all'interno

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

o

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

— Mujtaba Kably
fonte

3

Ho adottato un approccio leggermente diverso. Utilizzo dell'involucro del mazzo di carte

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

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

Questo dà il seguente risultato:

— Skrile
fonte

3

Puoi usare il mazzo di carte, allineerà tutte le carte ... questo proviene dalla pagina ufficiale di bootstrap 4.

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <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>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <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">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <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>
</div>

— jeyglo
fonte

2

Un altro approccio utile sono le griglie di carte :

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <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>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <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>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <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>
</div>

Espandi lo snippet

— Antonio Petricca
fonte

1

Il modo più minimale per ottenere questo (che io sappia) :

Applicare .text-monospace a tutti i testi nella scheda.
Limita tutti i testi nelle carte allo stesso numero di caratteri.

AGGIORNARE

Aggiungi .text-truncateil titolo della carta e / o altri testi. Ciò costringe i testi a una singola riga. Fare in modo che le carte abbiano la stessa altezza.

— doncadavona
fonte

Penso che tu sia lontano con questa risposta. Ogni scheda o sezione di una pagina web funzionante avrà chiaramente diverse quantità di testo (caratteri) e utilizzerà caratteri / caratteri tipografici che non sono a spaziatura fissa. Perché dovresti troncare il contenuto di testo che i visitatori (non possono) leggere?

— Kerry7777

@ Kerry7777, potresti voler troncare una lunga stringa e aggiungere un "..." alla fine per far sapere agli utenti che è stata troncata. Affinché possano leggere l'intera stringa, dovranno fare clic o passare il mouse. In questo modo, possiamo fare coerenza sui contenuti visualizzati. Perché i contenuti non sono gli stessi. Alcuni sono brevi, altri lunghi e il nostro spazio sullo schermo è limitato.

— doncadavona

1

In alcuni casi, è solo la lunghezza del testo che rende le carte disuguali in altezza. Quindi questa risposta è utile.

— Mohammed Shareef C

1

Sono un principiante in questo, quindi per favore perdona se mi manca qualcosa del tutto.

Ho provato molti dei precedenti. Se imposti l'altezza = 100%, la carta si espanderà sempre alla lunghezza massima della carta più lunga. Il contenitore vincolerà tutti alla stessa lunghezza.

Volevo vedere il contenitore, quindi ho usato il colore di sfondo per aiutarmi a vedere cosa stava succedendo.

<div class="col-lg-3"  style="background-color: rosybrown;">
    <div class="card w-100" Style="height: 100%">
        <div class="card-body">
            <img src="images/beHappy.png" alt="" class="img-fluid rounded-circle w-25 mb-3">
            <h4>CBe Happy</h2>

— csaw
fonte

0

questo ha funzionato bene per me:

<div class="card card-body " style="height:80% !important">

forzando il nostro CSS sui bootstrap CSS generali.

— Zenish Prajapati
fonte

0

Mi sono imbattuto in questo problema, la maggior parte delle persone usa jQuery ... Ecco la mia soluzione. "Non importa, sono solo un principiante in questo ..."

.cards-collection {
    .card-item { 
        width: 100%;
        margin: 20px 20px;
        padding:0 ;
        .card {
            border-radius: 10px;
                button {
                    border: inherit;
                }
        }
    }
}

     .container-fluid
         .row.cards-collection.justify-content-center
           .card-item.col-lg-3.col-md-4.col-sm-6.col-11
              .card.h-100

Se l'altezza di un elemento della carta è ad esempio 400px (in base al suo contenuto), poiché l'impostazione predefinita per flex-align è stretch, allora .card-item (figlio della riga o classe card-collection) verrà allungato. facendo in modo che l'altezza della carta sia il 100% del genitore occuperà l'intera altezza.

Spero di aver avuto ragione. Sono io?

— Alb Rick Bi
fonte

-3

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

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

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

Per una fila di carte, utilizzo:

<div class="row match-height">

Quindi abilita tutto il sito:

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

— rlu7732
fonte

-12

jsfiddle

Basta aggiungere l'altezza che desideri con CSS, esempio:

.card{
    height: 350px;
}

Dovrai aggiungere il tuo CSS.

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

— PlatinumJay
fonte

Sembra che il contenuto delle carte non sia allineato correttamente. Questa soluzione è troppo manuale Chissà se c'è qualcosa di più "intelligente"

— blueSurfer

Potresti provare qualcosa con jQuery, per creare dinamicamente l'altezza. Dipende da cosa vuoi fare con loro.

— PlatinumJay

Solo molto curioso di sapere perché così tanti down votano per la risposta? perchè sembra che funzioni

— Kick Buttowski

2

Questo non significa che la carta rimane un'altezza fissa, non un'altezza uguale e reattiva?

— Robert Andrews