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

【问题标题】：Applying box-shadow to Bootstrap 4 card component将 box-shadow 应用于 Bootstrap 4 卡片组件
【发布时间】：2020-12-03 16:47:22
【问题描述】：

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

我认为这与 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。

【问题讨论】：

发生了一些非常奇怪的事情，这与列有关。基本上你在一张牌的底部看到的是下一张牌的影子。您可以尝试更改它们之间的间距或阴影的大小，但这是 CSS columns 属性的一个相当奇怪的副作用

标签： html css twitter-bootstrap bootstrap-4 bootstrap-cards

【解决方案1】：

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

【讨论】：

transform 解决方案实际上对我来说效果更好，因为它不会像d-flex 那样影响卡片的width。比较 this 和 that。

【解决方案2】：

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

【讨论】：

你能解释一下为什么会发生这种情况吗？我将使用 Bootstrap 的快捷方式来显示 flex：class="card-columns d-flex"。
当然。因此，默认情况下，卡片列设置为display: inline-block，以防止卡片跨列中断。此外，卡片是使用 CSS 列属性而不是 flexbox 构建的，以便于对齐。希望对您有所帮助。
这打破了卡片之间的间距...