如何修復引導程序中的行、列布局

Question

我正在制作一個布局，以一個干凈整潔的布局查看所有引導卡，但這讓我很煩惱，我不知道為什么會這樣。 填滿所有列后看起來一切正常，即使該列只有 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

如果您希望 cols 位於中心，請使用以下命令：

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