如何修复引导程序中的行、列布局答案

【问题标题】：How do I fix the row, col layout in bootstrap如何修复引导程序中的行、列布局
【发布时间】：2022-01-21 09:04:52
【问题描述】：

我正在制作一个布局，以一个干净整洁的布局查看所有引导卡，但这让我很烦恼，我不知道为什么会这样。填满所有列后看起来一切正常，即使该列只有 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;
}

【问题讨论】：

“我不喜欢列中有两张卡片时的布局” - 您希望它看起来如何？

标签： html css bootstrap-4 layout bootstrap-5

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：