css - 你知道为什么只出现3张牌吗？

Question

我正在使用 bootstrap，我想连续放置 4 张卡片，每张卡片占据相同的宽度。但是下面的代码不起作用。只有 3 张卡片出现。看来问题是因为每张卡之间有很多余量。你知道如何正确解决这个问题吗？

示例:http://jsfiddle.net/h82w46Lz/1/

HTML::

<div class="container mt-4">
    <div class="row">
        <div class="col mb-4">
            <div class="card" style="width: 18rem;">
                <img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap">
                <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>
                    <a href="#" class="btn btn-outline-primary">Read</a>
                </div>
            </div>
        </div>
        <div class="col mb-4">
            <div class="card" style="width: 18rem;">
                <img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap">
                <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>
                    <a href="#" class="btn btn-outline-primary">Read</a>
                </div>
            </div>
        </div>
        <div class="col mb-4">
            <div class="card" style="width: 18rem;">
                <img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap">
                <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>
                    <a href="#" class="btn btn-outline-primary">Read</a>
                </div>
            </div>
        </div>
        <div class="col mb-4">
            <div class="card" style="width: 18rem;">
                <img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap">
                <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>
                    <a href="#" class="btn btn-outline-primary">Read</a>
                </div>
            </div>
        </div>
        <div class="col mb-4">
            <div class="card" style="width: 18rem;">
                <img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap">
                <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>
                    <a href="#" class="btn btn-outline-primary">Read</a>
                </div>
            </div>
        </div>
        <div class="col mb-4">
            <div class="card" style="width: 18rem;">
                <img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap">
                <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>
                    <a href="#" class="btn btn-outline-primary">Read</a>
                </div>
            </div>
        </div>
        <div class="col mb-4">
            <div class="card" style="width: 18rem;">
                <img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap">
                <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>
                    <a href="#" class="btn btn-outline-primary">Read</a>
                </div>
            </div>
        </div>
        <div class="col mb-4">
            <div class="card" style="width: 18rem;">
                <img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap">
                <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>
                    <a href="#" class="btn btn-outline-primary">Read</a>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

关闭前四张卡片的行 div 并添加“col-lg-3”类而不是“col”，并对后四张卡片执行相同的操作。