使用card-deck无法实现卡片横向排列，寻求技术帮助

你的问题主要出在Bootstrap类的误用和布局结构上，以下是具体修复方案：

问题分析 #

• 卡片内部嵌套的card-columns类是用来实现瀑布流式纵向堆叠布局的，会强制卡片换行，直接破坏了card-deck的横向排列逻辑。
• 卡片设置的固定宽度style="width:18rem;"会和card-deck的自适应宽度规则冲突，导致布局异常。

修复后的代码 #

<div class="form-group">
    <label asp-for="Character.Classes" class="control-label"></label>
    <div>
        <div class="container-fluid padding">
            <!-- 改用Grid网格系统实现横向排列，更灵活可控 -->
            <div class="row row-cols-1 row-cols-md-3 g-4">
                @foreach (var item in Model.Classes)
                {
                    <div class="col">
                        <div class="card bg-secondary shadow-lg h-100">
                            <!-- 用card-body包裹卡片内容，遵循Bootstrap卡片标准结构 -->
                            <div class="card-body">
                                <h4 class="card-title">
                                    <label><input asp-for="Character.Classes" value="@item.Name" type="radio" />@item.Name</label>
                                </h4>
                                <p class="card-text">
                                    <label>Hitdie = D</label>@Html.DisplayFor(modelItem => item.Hitdie)
                                </p>
                                <div class="form-group">
                                    <label asp-for="Character.Level" class="control-label"></label>
                                    <input asp-for="Character.Level" class="form-control" />
                                    <span asp-validation-for="Character.Level" class="text-danger"></span>
                                </div>
                            </div>
                            <div class="card-footer text-muted">
                                <a asp-action="Details" asp-route-id="@item.Id">Details</a>
                            </div>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
</div>

关键调整说明 #

1. 移除card-columns类：替换为标准的card-body包裹卡片内容，回归Bootstrap卡片的结构规范。
2. 改用Grid网格系统：用row + col组合替代card-deck，row-cols-1 row-cols-md-3表示移动端每行显示1张卡片，中等屏幕及以上每行显示3张；g-4用来设置卡片间的间距，布局更灵活。
3. 移除固定宽度：通过Grid的col类控制卡片宽度，避免固定宽度导致的冲突；添加h-100让卡片高度统一，视觉更整齐。
4. 检查Bootstrap资源：确保页面加载了正确版本的Bootstrap CSS（推荐Bootstrap 5.x，网格系统更完善），版本不兼容也会导致布局失效。

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