Bootstrap 4 Card - 页脚上方较短的边框答案

【问题标题】：Bootstrap 4 Card - Shorter border above footerBootstrap 4 Card - 页脚上方较短的边框
【发布时间】：2018-08-08 17:20:49
【问题描述】：

使用Bootstrap 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 内容不一致...

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

Codeply

【问题讨论】：

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

我发现这个问题可以使用spacing utility classes来解决。

在 Bootstrap 4 中，.card-body 和 .card-footer 都有侧边距。

改为添加填充到父 .card (px-3)，并删除从 .card-body 和 @987654329 中的填充 (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>

这展示了实用程序类的有用性。

【讨论】：

【解决方案2】：

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

【讨论】：

我认为这行不通。 Bootstrap 4 中的卡片首先没有填充。只有卡片主体和卡片页脚有填充。而且，这不会在边框旁边放置所需的间距。