Html 将盒阴影应用于引导4卡组件

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

我认为这与

利润率底部有关，但我不知道还有更多

让牌有阴影的正确方法是什么



.卡片{
盒影：0 10px 0 rgba（100,100,100,0.26）；
}
标题
身体
页脚
标题
身体
页脚
标题
身体
页脚

我的浏览器是Chrome84

请添加
显示：flex属性到
。卡片列
。这将解决您的问题。
该问题导致您在
卡列
类上使用的
列计数
css属性。您可以将卡片与flex对齐或添加
transform:translateZ（0）
到
.card
类中作为解决方法。
您能解释一下为什么在没有代码的情况下会发生这种情况吗？我将使用Bootstrap的快捷方式显示flex:
class=“card columns d-flex”
。当然可以。因此，默认情况下，卡列设置为
display:inline block
，以防止卡在列中断开。此外，卡片使用CSS列属性而不是flexbox构建，以便于对齐。希望你觉得这很有帮助。这打破了卡片之间的间隔…有一些非常奇怪的事情发生了，这与列有关。基本上，你在一张牌的底部看到的是下一张牌的阴影。您可以尝试更改它们之间的间距或阴影的大小，但这是CSS
列
属性的一个相当奇怪的副作用
转换
解决方案实际上对我更有效，因为它不会像
d-flex
那样影响卡片的
宽度。与…相比。
<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>