Bootstrap - aligner le bouton en bas de la carte
J'ai été jeter un oeil à l'un de l'Amorçage d'exemples d'utilisation de la card-deck
et card
classes (Exemple de prix). Je me demandais comment on peut résoudre le bouton d'alignement si l'une des listes a 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é le réglage de la .alignez-bas
classe de l'emballage sur le bouton dans la <div class="align-text-bottom">
. J'ai aussi essayé plusieurs suggestions de cette question sur l'ajout de l'espace cependant toujours pas de succès (aussi l'espacement doit être variable, tel qu'il remplit l'espace restant de la liste).
D'emballage dans <div class="carte-pied de bg-blanc">
n'a pas donné le résultat souhaité soit qu'il ne s'aligne pas sur le bouton en bas de la carte et il crée une sorte de frontière autour d'elle.
Quelqu'un a une idée?
Edit: Ici est un jsfiddle qui ressemble à ce problème.
- Vous pouvez toujours vous positionner comme
absolute, bottom:0, margin:0 auto
, avec un de leurs parents définir commeposition: relative
- J'ai essayé de réglage
style="margin-top: auto;"
, mais cela ne change pas la situation. Le bouton se trouve exactement là où il était avant. Voir ce violon.
Vous devez vous connecter pour publier un commentaire.
mise à jour basé sur plus de jsfiddle lien
Vous pouvez utiliser les éléments suivants Bootstrap 4 modificateur de classes:
d-flex
à.card-body
flex-column
à.card-body
mt-auto
à.btn
imbriquée dans.card-body
mis à jour le violon
Reportez-vous à cette page pour une liste complète des flexbox la modification des classes de Bootstrap 4.
Une question similaire a été la réponse ici.
Il suffit d'ajouter le
align-self-end
de la classe point pour s'aligner en bas.https://www.codeply.com/go/Fiorqv1Iz6
Par défaut, le
card
est display:flex, mais lecard-body
ne l'est pas. En raison de cela, vous devez ajouterd-flex flex-column
à lacard-body
. Cela rendra la flexbox alignement des classes.Une autre option est d'utiliser
mt-auto
(auto marge supérieure) sur le bouton qui va le pousser vers le bas de la Carte.Définir la
.card-body
divdisplay:flex
etflex-direction:column
.De donner ensuite le bouton
margin-top:auto
.J'imagine qu'il y a de Bootstrap cours d'aide pour cela.
CSS:
HTML:
Flex est votre ami
Quelque chose comme cela fonctionnera de la magie:
CSS:
HTML:
Vous devez ajouter: