将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>

我的浏览器是Chrome 84。

​

​

Answer 1

该问题会导致您在card-columns类上使用的column-count css属性。您可以将卡片与flex对齐，或者将transform: translateZ(0);添加到.card类作为变通方法。

Answer 2

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