Comment aligner verticalement les boutons au bas des cartes Bootstrap avec des longueurs de liste variées ?

Alignement vertical des boutons dans les cartes Bootstrap avec des longueurs de liste variées

Dans un projet Bootstrap, vous pouvez rencontrer une situation où vous avez une série de cartes avec des longueurs de liste variables. Si vous souhaitez que tous les boutons de ces cartes soient alignés verticalement en bas, vous pourriez rencontrer des difficultés avec le style par défaut.

Pour obtenir cet alignement, envisagez d'utiliser les classes de modificateurs Bootstrap 4 suivantes :

• d-flex à .card-body
• flex-column à .card-body
• mt-auto à .btn imbriqué dans .card-body

Ces classes configureront le .card-body pour utiliser flexbox disposition et réglez le bouton (.btn) pour qu'il occupe automatiquement l'espace restant dans le sens vertical.

Pour une démonstration pratique, reportez-vous à ceci jsfiddle mis à jour :

[lien jsfiddle]

Considérations supplémentaires :

• Vous pouvez personnaliser l'espacement en modifiant les marges du .btn éléments utilisant des classes comme mr-auto ou ml-auto.
• Pensez à utiliser le responsive flex utilitaires (par exemple, d-block, d-md-none) lorsque vous ciblez des tailles d'écran spécifiques.

En mettant en œuvre ces techniques, vous pouvez vous assurer que les boutons de vos cartes Bootstrap sont alignés verticalement et répondent aux différentes longueurs de contenu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!