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

Question

I'm trying to apply a simple shadow to a cards component. Somehow the shadow glitches and looks mirrored and misplaced.

I think it has to do with margin-bottom but there's more to it I can't figure out.

What is the correct approach to let cards have a shadow?

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>

My browser is Chrome 84.

Answer 1

The problem causes the column-count css property that you use on the card-columns class. You can align cards with flex or add transform: translateZ(0); to the .card class as a workaround.

Answer 2

Please add display: flex; property to .card-columns . That will solve your problem.