Carte Bootstrap 4 - Bordure plus courte au-dessus du pied de page - twitter-bootstrap, bootstrap-4

En utilisant Bootstrap 4, existe-t-il un moyen de réduire la longueur de la bordure supérieure du card-footer?

Le normal card-footer la bordure s'étend sur toute la largeur de la carte. J'ai essayé d'utiliser les utilitaires margin (mx-3) sur le card-footer pour raccourcir la bordure visible ...

        <div class="card">
<div class="card-body">
..
</div>
<div class="card-footer mx-3">
Footer
</div>
</div>

Cependant, avec la marge ajoutée, le contenu du pied de page ne correspond pas au card-body contenu...

Existe-t-il un moyen de raccourcir la bordure visible ET d'aligner le pied de page de la carte avec le corps à l'aide uniquement les classes Bootstrap 4, et pas de CSS supplémentaire?

Codeply

Réponses:

J'ai découvert que ce problème peut être résolu en utilisant le classes utilitaires d'espacement.

Dans Bootstrap 4, le .card-body et .card-footer les deux ont un rembourrage latéral.

Par à la place ajouter rembourrage au parent .card (px-3), et enlever le rembourrage (px-0) du .card-body et .card-footer (de façon à ce qu'ils se neutralisent), la bordure supérieure visible du pied de page est alors diminuée. Le contenu du corps et du pied de page s'aligne sur le côté gauche.

https://www.codeply.com/go/fSLiGhbNWV

<div class="card px-3">
<div class="card-body px-0">
Content
</div>
<div class="card-footer text-muted bg-transparent px-0">
Footer
</div>
</div>

Cela montre l'utilité des classes utilitaires.

J'ai eu le même problème, mais j'ai constaté que l'ajout de px-0 à la classe .card l'a corrigé. Il a également résolu le problème avec le rendu trop petit des images de carte