如何修復引導程式中的行、列布局-有解無憂

我正在制作一個布局以在一個漂亮干凈的布局中查看所有引導卡，但這讓我很煩惱，我不知道為什么會發生這種情況。填充所有列看起來都很好，即使該列只有 1 張卡，它看起來也很好，但是如果達到 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;
}

uj5u.com熱心網友回復：

我猜你最多想要連續 3 張牌？嘗試使用col-4而不是col.

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

uj5u.com熱心網友回復：

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

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/386927.html

標籤：html css bootstrap-4 布局 bootstrap-5

上一篇：無法在div中向右移動文本

下一篇：如何在附加子項上使用本地存盤