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

134

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>

— bleuSurfer
source

Des efforts jusqu'à présent? Un code à partager?

— baao

2

Cet exemple concerne les colonnes de type maçonnerie. L'intérêt de ce style est que les cartes sont de hauteurs différentes . Utilisez un deck et activez le mode Flexbox si vous voulez des hauteurs égales.

— Quentin

1

Le jeu ne fonctionne que pour les cartes consécutives. Ce que je veux, c'est le même effet card-columnsmais en gardant la même hauteur.

— blueSurfer

163

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?

— Kerry7777
source

3

h-100 n'est pas une hauteur fixe, c'est une hauteur à 100% (de la rangée)

— konyak

cela devrait être la réponse

— ACed

C'est la vraie réponse

— Andrew Bullock

@konyak ouais, je réalise ce copain. Je ne parle pas de h-100 (faites défiler cette page).

— Kerry7777

139

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.

— user3350279
source

16

so simple h-100

— PNC

9

.h-100 - brilliant

— JCraine

2

Cela a fait l'affaire pour moi en cas de d-flexproblèmes avec IE (que je dois prendre en charge). Je viens d'ajouter un mb-4à la division parent pour séparer un peu plus les cartes.

— Charles Paske

et vous pouvez également utiliser .pre-scrollable pour le faire défiler verticalement

— Muhammad Waqas Aziz

J'ajouterais la classe .py-2 à tous les div avec la classe .col- * pour ajouter un remplissage entre les lignes.

— konyak

93

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>

Développer l'extrait

— djibé
source

1

Cette réponse fonctionne très bien! Si vous ne pouvez pas utiliser 'card-column' ou 'card-deck' pour obtenir le comportement réactif souhaité dans toutes les fenêtres.

— Getsomepeaches

Cela a fonctionné pour moi. J'ai une colonne avec une grande carte, et à droite une autre colonne avec deux lignes. donc, la carte de gauche prend la hauteur des deux rangées adjacentes, merci!

— Erich García

C'était la voie à suivre. J'ai essayé card-columns mais cela ne pouvait pas prendre plus de 3 colonnes par ligne. Merci pour cette réponse

— Yeku Wilfred Chetat

le jeu de cartes ne fonctionnait pas dans mon cas, votre réponse a fait le travail!

— TBG

31

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

— bsesic
source

12

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

— Zim
source

J'ai bifurqué votre code pour tester quelque chose; J'ai besoin que les titres s'étendent aussi pour avoir la même hauteur, ce qui ne se produit pas ici: codeply.com/go/fqnQZ2ZGJy - sachez que je peux faire en sorte que mes "titres plus courts" prennent la même hauteur que le titre plus long? J'ai essayé de jouer avec la flexbox et les grilles, mais je n'arrive pas à y arriver.

— davewoodhall

11

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>

— pseudo
source

4

envelopper les cartes à l'intérieur

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

ou

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

— Mujtaba Kably
source

3

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:

— Skrile
source

3

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>

— Jeyglo
source

2

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>

Développer l'extrait

— Antonio Petricca
source

1

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.

— doncadavona
source

Je pense que vous êtes loin de cette réponse. Chaque carte ou section d'une page Web de travail aura clairement différentes quantités de texte (caractères) et utilisera des polices / caractères qui ne sont pas à espacement fixe. Pourquoi voudriez-vous tronquer le contenu texte que les visiteurs (ne peuvent pas) lire?

— Kerry7777

@ Kerry7777, vous voudrez peut-être tronquer une longue chaîne et ajouter un "..." à la fin de celle-ci pour informer les utilisateurs qu'elle a été tronquée. Pour qu'ils lisent la chaîne entière, ils devront cliquer ou passer la souris dessus. De cette façon, nous pouvons faire des cohérences sur le contenu affiché. Parce que le contenu n'est pas le même. Certains sont courts, certains sont longs et notre espace d'écran est limité.

— doncadavona

1

Dans certains cas, seule la longueur du texte rend les cartes de hauteur inégale. Donc, cette réponse est utile.

— Mohammed Shareef C

1

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>

— scie
source

0

CA marchait bien pour moi:

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

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

— Zenish Prajapati
source

0

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?

— Alb Rick Bi
source

-3

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

— rlu7732
source

-12

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.

— PlatineJay
source

Semble que le contenu des cartes n'est pas correctement aligné. Cette solution est trop manuelle je me demande s'il y a quelque chose de plus "intelligent"

— blueSurfer

Vous pouvez essayer quelque chose avec jQuery, pour créer dynamiquement la hauteur. Cela dépend de ce que vous voulez en faire.

— PlatinumJay

Juste très curieux de savoir pourquoi il y a tant de voix contre la réponse? car il semble que cela fonctionne

— Kick Buttowski

2

Cela ne signifie-t-il pas que la carte reste une hauteur fixe, pas une hauteur égale sensible?

— Robert Andrews