web-dev-qa-db-ja.com

Bootstrap 4カードコンポーネントにボックスシャドウを適用する

カードコンポーネントに簡単な影を適用しようとしています。どういうわけか影をグリッチしてミラー化したように見えます。

私はそれが_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です。

enter image description here

htmlcsstwitter-bootstrapbootstrap-4bootstrap-cards
3
Daniel W.

問題は、_column-count_クラスで使用する_card-columns_ cssプロパティを引き起こします。カードをFLEXで整列させるか、transform: translateZ(0);を回避策として_.card_クラスに追加することができます。

4
Anna Miroshnichenko

display: flex;プロパティを.card-columnsに追加してください。それはあなたの問題を解決します。

1
Sunny Vaghadia