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

Question

使用 Bootstrap 4 ，有没有办法减少card-footer的上边框长度？

正常card-footer边框横跨卡片的整个宽度。 我尝试使用card-footer上的margin utils（mx-3）缩短可见边框...

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

但是，如果添加了页边距，则页脚内容不会与card-body内容对齐...

有没有办法缩短可见边框并使用 仅使用Bootstrap 4类 来使卡片页脚与主体对齐，而且没有额外的CSS？

Codeply

Answer 1

我发现可以使用spacing utility classes解决此问题。

在Bootstrap 4中，.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>

这表明了实用程序类的有用性。

Answer 2

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