如何修复 bootstrap 中的行、列布局

Question

我正在制作一个布局以在一个漂亮干净的布局中查看所有 bootstrap 卡片，但这让我很烦，我不知道为什么会这样。它看起来很好，所有列都已填满，即使该列只有 1 张卡片，它看起来也很好，但如果达到 2 张卡片，它开始看起来很奇怪，如下所示：（注意第 3 和第 2 张图像之间的差异）

我不喜欢列中有两张卡片时的布局，请问如何解决？这是我当前的代码：（它在 Jinja2 中，但没关系，我只是循环遍历所有帖子，并从后端到前端显示内容）

<div class="container" style="margin-top: 100px;">
    <div class="row">
        {% for clip in clips %}
        <div class="col">
            <div class="card" style="width: 32rem;">
                <div class="card-body">
                    <h5 class="card-title">{{ clip.title }}</h5>
                    <h6 class="card-subtitle mb-2 text-muted">
                        <img src="{{ url_for('static', filename='images/profile-pictures/' ~ clip.user.picture) }}", height="32" width="32" style="border-radius: 50%;">
                        {{ clip.user.username }}
                    </h6>
                    <p class="card-text" style="margin-top: 15px;">
                        {{ clip.description }}
                    </p>

                    {% if clip.clip_id % 2 == 0 %}
                    <a href="#"><button class="btn-hover color-2">PLAY</button></a>
                    {% else %}
                    <a href="#"><button class="btn-hover color-1">PLAY</button></a>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

& CSS:

.card-body {
  padding: 25px;
}

.card {
  margin-bottom: 50px;
}

Answer 1

我猜你最多想要连续 3 张卡片？尝试使用 col-4 而不是 col.

来源：https://getbootstrap.com/docs/4.6/layout/grid/#auto-layout-columns

Answer 2

如果你想让列居中，那么使用这个：

<div class="col d-flex justify-content-center align-items-center">

如何修复 bootstrap 中的行、列布局

How do I fix the row, col layout in bootstrap

html

css

layout

bootstrap-4

bootstrap-5