Bootstrap - bouton d'alignement au bas de la carte
Je jetais un œil à l'un des exemples Bootstrap qui utilisent le card-deck et card classes ( exemple de tarification ). Je me demandais comment on pouvait corriger l'alignement des boutons si l'une des listes avait moins d'éléments que les autres.
Je voudrais que tous les boutons soient alignés verticalement (au bas de chaque carte) mais je ne pouvais pas trouver un moyen de le faire. J'ai essayé de régler le .align-bottom classe ainsi qu'envelopper le bouton dans <div class="align-text-bottom">. J'ai également essayé plusieurs suggestions de cette question sur l'ajout d'espace mais toujours pas de succès (également l'espacement devrait être variable de sorte qu'il remplisse l'espace restant de la liste).
Emballage <div class="card-footer bg-white"> n'a pas non plus donné le résultat souhaité car il n'aligne pas le bouton en bas de la carte et crée une sorte de bordure autour.
Est-ce que quelqu'un a une idée?
Edit: Voici un jsfiddle qui ressemble au problème.
Utilisez le pied de page, il a déjà tout configuré pour vous.
<div class="card-deck">
<div class="card">
<div class="card-body">
<h4 class="card-title">Title goes here</h4>
<p class="card-text">Ut leo enim, fermentum fermentum tempor sit amet, vehicula in felis. Pellentesque a arcu augue. Nam eu malesuada lorem. Curabitur et molestie lacus.</p>
</div>
<div class="card-footer text-muted mx-auto">
<button type="button" class="btn btn-sm btn-outline-secondary">Click me!</button>
</div>
</div>
Vous pouvez ensuite éventuellement styliser l'élément de pied de carte.
.card-footer {
background: transparent;
border-top: 0px;
}