Bootstrap 4 Card - По-къса граница отдолу - twitter-bootstrap, bootstrap-4

Използвайки Bootstrap 4, има ли начин да се намали дължината на горната граница на card-footer?

Нормалният card-footer рамката обхваща цялата ширина на картата. Опитах се да използвам полезните полети (mx-3) на card-footer за да скъси видимата граница ...

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

Въпреки това, с добавения марж, съдържанието на долния колонтитул не съвпада с card-body съдържание ...

Има ли начин да се скъси видимата граница И да се подравнява долният колонтитул на картата с тялото само класовете Bootstrap 4, и няма допълнителен CSS?

Codeply

Отговори:

Открих, че този проблем може да бъде решен с помощта на разстояние класове полезност.

В Bootstrap 4, the .card-body и .card-footer и двете имат странични подплънки.

Вместо това добавяне подплънка към родителя .card (px-3), и премахване на подплънката (px-0) от .card-body и .card-footer (така че те противодействат един на друг) видимата горна граница на долния колонтитул се намалява. Съдържанието на тялото и долния колонтитул се подравнява от лявата страна.

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>

Това показва колко полезни са класовете за полезност.

Имах същия проблем, но установих, че просто добавянето на px-0 към класа .card го оправи. Той също отстрани проблема с всички изображения на карти, които правят твърде малко