Comment faire pour que les cartes Bootstrap 4 aient la même hauteur dans les colonnes de cartes?

J'utilise Bootstrap 4 alpha 2 et je profite des cartes. Plus précisément, je travaille avec cet exemple tiré de la documentation officielle. Comment puis-je faire en sorte que toutes les cartes aient la même hauteur?

Tout ce que je peux penser maintenant, c'est de définir la règle CSS suivante:

.card {
    min-height: 200px;
}

Mais ce n'est qu'une solution codée en dur qui ne fonctionnera pas dans un cas général. Le code à mon avis est le même que celui de la documentation, à savoir:

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

Vous pouvez mettre les classes sur la "ligne" ou la "colonne"? Ne sera pas visible sur les cartes (bordure) si vous l'utilisez sur la ligne. 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">

Certaines des autres réponses ici semblent «farfelues». Pourquoi utiliser une hauteur minimale ou pire encore une hauteur fixe?

Je pensais que ce problème (hauteurs égales) faisait partie de la raison de la progression loin des blocs divs flottants?

J'utilise Bootstrap 4 (Beta 2). Pendant ce temps, les situations semblent avoir changé. J'ai eu le même problème et j'ai trouvé une solution simple. Voici mon code:

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

Avec "col-sm-12 col-lg-6", j'ai rendu les cartes réactives. Avec "card h-100", j'ai réglé toutes les cartes à la hauteur de leur colonne parente. Sur mon système, cela fonctionne, mais je ne suis pas un pro. Alors, j'espère avoir aidé quelqu'un.

Meilleure solution, Bootstrap 4 a tout ce dont vous avez besoin: UTILISEZ LA .d-flexet .flex-fillclasse. N'utilisez pas le card-deckscar ils ne répondent pas. J'ai utilisé col-sm, vous pouvez utiliser la .colclasse que vous voulez, ou utiliser col-lg-xle x signifie le nombre de colonnes de largeur, par exemple 4 ou 3 pour une meilleure vue si le message en a plusieurs, puis 3 ou 4 par colonne

Voici la bête, essayez de réduire la fenêtre du navigateur à XS pour la voir en action:

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

Vous pouvez appliquer la classe h-100, qui correspond à la hauteur 100%.

MISE À JOUR: Dans Bootstrap 4 , flexbox est maintenant par défaut, et chaque card-deckligne contiendra 3 cartes. Les cartes se rempliront à pleine hauteur.

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

Bootstrap 4 alpha card-columnsutilise des colonnes CSS3 qui ne supportent pas vraiment des hauteurs égales (sauf le remplissage de colonnes qui n'est pris en charge que dans Firefox).

Si vous activez à la place le mode Flexbox Bootstrap 4, vous pouvez utiliser à la place le card-decket un peu de CSS pour égaliser la hauteur et envelopper toutes les 3 colonnes.

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

http://codeply.com/go/YFFFWHVoRB

Carte Bootstrap associée
de même hauteur en col

Voici comment je l'ai fait:

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>

envelopper les cartes à l'intérieur

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

ou

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

J'ai adopté une approche légèrement différente. Utilisation de l' enveloppe du jeu de cartes

J'ai ajouté une règle de style qui limite la hauteur du bloc de carte:

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

Cela donne le résultat suivant:

Vous pouvez utiliser le jeu de cartes, il alignera toutes les cartes ... cela vient de la page officielle de 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>

Les grilles de cartes sont une autre approche utile :

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

Moyen le plus minimal pour y parvenir (que je connaisse) :

• Appliquer .text-monospaceà tous les textes de la carte.
• Limitez tous les textes des cartes au même nombre de caractères.

METTRE À JOUR

Ajoutez .text-truncatele titre de la carte et / ou d'autres textes. Cela force les textes sur une seule ligne. Faire en sorte que les cartes aient la même hauteur.

Je suis novice dans ce domaine, alors veuillez pardonner si quelque chose me manque tous ensemble.

J'ai essayé plusieurs des solutions ci-dessus. Si vous définissez la hauteur = 100%, la carte s'étendra toujours à la plus grande longueur de la carte la plus longue. Le conteneur contraindra tous à la même longueur.

Je voulais voir le conteneur, alors j'ai utilisé la couleur de fond pour m'aider à voir ce qui se passait.

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

CA marchait bien pour moi:

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

forcer notre CSS sur le CSS général bootstraps.

Je suis tombé sur ce problème, la plupart des gens utilisent jQuery ... Voici ma solution. "Ça ne me dérange pas, je ne suis qu'un débutant dans ce domaine ..."

.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

Si la hauteur d'un élément de carte est par exemple de 400px (en fonction de son contenu), parce que la valeur par défaut pour flex-align est stretch, alors .card-item (enfant de la classe row ou card-collection) sera étiré. rendre la hauteur de la carte à 100% du parent occupera cette pleine hauteur.

J'espère que j'avais raison. Suis-je?

Si quelqu'un est intéressé, il existe un plugin jquery appelé: jquery.matchHeight.js

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

matchHeight rend la hauteur de tous les éléments sélectionnés exactement égale. Il gère de nombreux cas extrêmes qui provoquent l'échec de plugins similaires.

Pour une rangée de cartes, j'utilise:

<div class="row match-height">

Ensuite, activez à l'échelle du site:

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

jsfiddle

Ajoutez simplement la hauteur souhaitée avec CSS, exemple:

.card{
    height: 350px;
}

Vous devrez ajouter votre propre CSS.

Si vous consultez la documentation, c'est pour la maçonnerie style de - le fait est qu'ils n'ont pas tous la même hauteur.