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>
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?
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.
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>
Vous pouvez appliquer la classe h-100
, qui correspond à une hauteur de 100%.
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;
}
}
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 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;}
Le moyen le plus minimal pour y parvenir (que je sache):
.text-monospace
à tous les textes de la fiche.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.