将 box-shadow 应用于 Bootstrap 4 卡片组件

Question

我正在尝试将简单的阴影应用于卡片组件。 不知何故阴影出现故障，看起来像镜像和错位。

我认为它与 margin-bottom 有关，但还有更多我无法弄清楚。

让卡片有阴影的正确做法是什么？

https://jsfiddle.net/qdjeuo65/

<style>
    .card {
      box-shadow: 0 0 10px 0 rgba(100, 100, 100, 0.26);
    }
    
</style>

<div class="card-columns">
    <div class="card">
        <div class="card-body">
            <div class="card-title">title</div>
            <div class="card-text">
                body
            </div>
        </div>
        <div class="card-footer">
            footer
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="card-title">title</div>
            <div class="card-text">
                body
            </div>
        </div>
        <div class="card-footer">
            footer
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="card-title">title</div>
            <div class="card-text">
                body
            </div>
        </div>
        <div class="card-footer">
            footer
        </div>
    </div>
</div>

我的浏览器是Chrome84.

Answer 1

请将 display: flex; 属性 添加到 .card-columns。那将解决你的问题。

Answer 2

问题导致您在 card-columns class 上使用 column-count css 属性。您可以将卡片与 flex 对齐或将 transform: translateZ(0); 添加到 .card class 作为解决方法。