Bootstrap 5卡片尺寸问题求助：小屏幕下卡片溢出容器

我是前后端开发新手，在练习制作Discord机器人仪表盘时，使用Bootstrap 5遇到了卡片尺寸适配问题：将卡片放入容器后，小屏幕下卡片会溢出容器。相关代码如下：

<div class="container-fluid mx-auto mt-4 d-flex justify-content-center align-items-center" style="background-color: #212529; padding: 40px; border: 3px solid #f5f5f5; border-radius: 10px; max-height: auto;">

    <!-- cards -->

    <div class="row mx-auto justify-content-center">
        {% for guild in guilds %}
        <div class="col-6 col-sm-3 col-md-3 col-lg-2 mb-4" style="min-width: 150px; min-height: auto;">
            <a href="{{ url_for('guild', guild_id=guild['id']) }}" class="text-decoration-none text-dark">
                <div class="card" style="background-color: #ffffff; border: 2px solid #ffffff; border-radius: 7px;">
                    {% if guild['icon'] %}
                    <img class="card-img-top img-fluid mb-3" src="https://cdn.discordapp.com/icons/{{ guild['id'] }}/{{ guild['icon'] }}">
                    {% else %}
                    <img class="card-img-top img-fluid mb-3" src="../static/defualt_pic_discord.png">
                    {% endif %}
                    <div class="card-block high">
                        <h1>
                            <div class="display-2 text-center" style="font-size: 1rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #333;"> {{ guild['name']}} </div>
                        </h1>
                    </div>
                </div>
            </a>
        </div>
        {% endfor %}
    </div>
</div>

问题原因及修复方案 #

问题分析

1. 最外层容器的d-flex align-items-center布局会强制容器高度适配内容，挤压内部row的可用空间，再加上固定的padding:40px，小屏幕下容易出现空间不足。
2. 列元素设置了col-6（超小屏幕占50%宽度）和min-width:150px，当屏幕宽度小于300px时，列的宽度会超过容器宽度导致溢出。
3. Bootstrap 5中card-block类已废弃，使用它可能引发布局异常。

修复步骤

1. 调整外层容器布局：移除d-flex align-items-center，保留mx-auto实现水平居中；添加overflow:hidden防止内容溢出；删除无效的max-height: auto。
2. 优化响应式列配置：将col-6改为col-12 col-sm-6 col-md-3 col-lg-2，让超小屏幕下卡片占满一行，避免宽度不足；可根据需求将min-width调整为120px或直接移除。
3. 修复卡片内部元素：将card-block替换为Bootstrap 5标准的card-body；移除冗余的h1标签，减少层级嵌套。

修改后的代码

<div class="container-fluid mx-auto mt-4 justify-content-center" style="background-color: #212529; padding: 40px; border: 3px solid #f5f5f5; border-radius: 10px; overflow: hidden;">

    <!-- cards -->

    <div class="row mx-auto justify-content-center">
        {% for guild in guilds %}
        <div class="col-12 col-sm-6 col-md-3 col-lg-2 mb-4" style="min-width: 120px;">
            <a href="{{ url_for('guild', guild_id=guild['id']) }}" class="text-decoration-none text-dark">
                <div class="card" style="background-color: #ffffff; border: 2px solid #ffffff; border-radius: 7px;">
                    {% if guild['icon'] %}
                    <img class="card-img-top img-fluid mb-3" src="https://cdn.discordapp.com/icons/{{ guild['id'] }}/{{ guild['icon'] }}">
                    {% else %}
                    <img class="card-img-top img-fluid mb-3" src="../static/defualt_pic_discord.png">
                    {% endif %}
                    <div class="card-body">
                        <div class="text-center" style="font-size: 1rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #333;"> {{ guild['name']}} </div>
                    </div>
                </div>
            </a>
        </div>
        {% endfor %}
    </div>
</div>

内容的提问来源于stack exchange，提问作者Kenyati