引导4卡-页脚上方较短的边框

Question

使用引导带4，有办法减少card-footer顶部边框的长度吗？

普通的card-footer边框跨越卡的整个宽度。我尝试使用card-footer上的边距实用程序(mx-3)来缩短可见边框.

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

但是，使用添加的页边距，页脚内容与card-body内容不一致.

​

​

有没有一种方法可以缩短可见边框，让卡片页脚与主体对齐，只使用引导4类，而不需要额外的CSS？

Codeply

Answer 1

我发现使用间隔实用程序类可以解决这个问题。

在引导程序4中，.card-body和.card-footer都有侧填充。

相反，将填充添加到父.card (px-3)中，并从.card-body和.card-footer (以便它们相互抵消)中移除填充(px-0)，从而减少页脚的可见顶部边框。身体和页脚内容在左边对齐。

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>

这说明了实用程序类有多有用。

Answer 2

我也遇到了同样的问题，但我发现只需将px-0添加到.card类中就可以修复它。它还解决了任何卡片图像渲染太小的问题。