-2

私は現在6枚のカードを持っています.3枚のカードを列に揃えたいので、合計2列になります.

私のコードはここにあります https://codesandbox.io/s/card-tykr9?file=/src/App.js

誰かが助けを求めて立ち寄ることができますか?

4

2 に答える 2

0

このコードをチェックしてください。このコードを bootstrap4 に実装します。

    <div class="container">
    <div class="row ">
        <h4>we can use "card-deck" for same height and "card-group" to remove margins and padding between cards</h4>
        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4 m">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title" id="harry">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title" id="harry">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title" id="harry">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title" id="harry">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
    </div>
</div>

結果: 上記のコードの出力

于 2020-11-16T22:14:17.037 に答える