时间戳

首页 > 解决方案 > Bootstrap justify-content-around 最后一项放错了位置

html - Bootstrap justify-content-around 最后一项放错了位置

问题描述

目前我的原型网站看起来像这样，带有 justify-content-around： 在此处输入图像描述

我想要的是，当卡片数量不均匀时，最后一张卡片与其他卡片一致。有没有办法做到这一点？我知道，它可以与 justify-space-between 一起使用，但是周围呢？

这是我的源代码：

    <div class="container-fluid">
        <div class="container-fluid row justify-content-around cards ml-0">
            <div class="card col-12 col-md-5 col-lg-4 col-xl-3 mb-4 mx-1">
                <img src="../images/lit.svg" class="card-img-top" alt="alternative">
                <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-primary">Go somewhere</a>
                </div>
            </div>
            <div class="card col-12 col-md-5 col-lg-4 col-xl-3 mb-4 mx-1">
                <img src="../images/lit.svg" class="card-img-top" alt="alternative">
                <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-primary">Go somewhere</a>
                </div>
            </div>
            <div class="card col-12 col-md-5 col-lg-4  col-xl-3 mb-4 mx-1">
                <img src="../images/lit.svg" class="card-img-top" alt="alternative">
                <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-primary">Go somewhere</a>
                </div>
            </div>
        </div>
    </div>

我在一个额外的 css 文件中添加的内容如下：

.cards::after{
    content: '';
    flex: auto;
}

这样至少最后一项在左侧而不是在中间！

提前致谢！

标签： htmlcssbootstrap-4flexbox

解决方案

将您的更改col-md-5为col-md-4. 下面我为你的一个小片段完成了

    <div class="card col-12 col-md-4 col-lg-4 col-xl-3 mb-4 mx-1">
        <img src="../images/lit.svg" class="card-img-top" alt="alternative">
        <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-primary">Go somewhere</a>
        </div>
    </div>

推荐阅读