如何让Bootstrap 5列在内容溢出时自动调整尺寸？

你的问题出在固定样式限制了列的自适应能力，按以下步骤修改即可解决：

1. 删除强制固定宽度
   代码里多个<div class="col">加了内联样式width:50px，这会锁死列宽，直接删掉这个样式，让列根据内容自动调整宽度。

2. 修复弹性布局属性
   给外层包裹卡片的col加上flex-grow-1类，确保它能在内容溢出时自动扩展宽度，不会被其他列挤压。

3. 调整内部行的对齐方式
   卡片内部的row row-cols-2加上align-items-start类，避免子列被强制拉伸高度，导致内容重叠。

修改后的核心代码片段示例：

<div class="row">
    <!-- 第一个列，添加flex-grow-1 -->
    <div class="col flex-grow-1">
        <h1 class="header">User</h1>
        <div class="card card-large border-0 me-1">
            <div class="card-body shadow">
                <!-- 内部row添加align-items-start -->
                <div class="row row-cols-2 align-items-start">
                    <!-- 删除width:50px内联样式 -->
                    <div class="col" style="text-align: left; margin-left: 15px; margin-top: 16px;">
                        <i class="fa-solid fa-user-pen" style="font-size: 50px;"></i>
                    </div>
                    <div class="right-column">
                        <a class="header row pt-2">Username: </a>
                        <a class="header row pt-2">Plan: </a>
                        <a class="header row pt-2">Discord: </a>
                        <a class="header row pt-2">Date of registration: </a>
                        <a class="header row pt-2">Used searches: /</a>
                    </div>
                </div>
                <!-- 其他内容保持不变 -->
            </div>
        </div>
    </div>
    <!-- 其余两个列做同样修改 -->
    <div class="col flex-grow-1">
        <!-- Plan卡片内容，同样删除固定width，内部row加align-items-start -->
    </div>
    <div class="col flex-grow-1">
        <!-- API卡片内容，同样修改 -->
    </div>
</div>

另外检查自定义的card-large类，如果它设置了固定宽度或高度，也要移除这些限制，让卡片能随内容自动撑开。

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