web-dev-qa-db-fra.com

Comment faire en sorte que Bootstrap 4 cartes ait la même hauteur dans les colonnes de cartes?

J'utilise Bootstrap 4 alpha 2 et profite des cartes. Plus précisément, je travaille avec cet exemple tiré de la documentation officielle. Comme le titre le dit, comment puis-je faire toutes les cartes de la même hauteur?

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

.card {
    min-height: 200px;
}

Mais il s’agit simplement d’une solution codée en dur qui ne fonctionnera pas dans un cas général. À mon avis, le code 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>
htmlcsstwitter-bootstrapbootstrap-4bootstrap-cards
80
blueSurfer

Vous pouvez soit 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 une hauteur fixe?

Je pensais que cette question (hauteurs égales) faisait partie de la raison de l’éloignement des divs en blocs flottants?

106
Kerry7777

J'utilise Bootstrap 4 (version bêta 2). En attendant, la situation semble avoir changé. J'ai eu le même problème et j'ai trouvé une solution facile. Ceci est 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 placé toutes les cartes à la hauteur de leur colonne parente. Sur mon système, cela fonctionne, mais je ne suis pas un pro. Donc, j'espère que j'ai aidé quelqu'un.

93
user3350279

La meilleure solution, Bootstrap 4 a tout ce dont vous avez besoin: UTILISEZ les classes .d-flex et .flex-fill. N'utilisez pas le card-decks car ils ne répondent pas. J'ai utilisé col-sm, vous pouvez utiliser la classe .col que vous voulez.

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

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

11
bsesic

UPDATE: Dans Bootstrap 4 , flexbox est maintenant défini par défaut et chaque ligne card-deck contiendra 3 cartes. Les cartes se rempliront à pleine hauteur.

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

Le Bootstrap 4 alpha _ card-columns utilise des colonnes CSS3 qui ne supportent pas vraiment les hauteurs égales (sauf le remplissage de colonne qui est uniquement supposé dans Firefox).

Si vous activez plutôt le mode Bootstrap 4 flexbox, vous pouvez également utiliser le card-deck et 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

Connexes
Carte Bootstrap de même hauteur en Col

8
Zim

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

envelopper les cartes à l'intérieur

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

ou

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

4
Mujtaba Kably

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

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

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

Cela donne le résultat suivant: enter image description here

2
skrile

Le moyen le plus minimal pour y parvenir (que je sache):

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

MISE À JOUR

Ajoutez .text-truncate dans le titre de la carte et/ou dans d'autres textes. Cela force les textes à une seule ligne. Faire les cartes ont la même hauteur.

0
doncadavona