【问题标题】: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 中的卡片首先没有填充。只有卡片主体和卡片页脚有填充。而且,这不会在边框旁边放置所需的间距。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-01-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-08-07
      相关资源
      最近更新 更多