如何让Bootstrap的card-deck在页面上水平排列？

问题原因 #

默认情况下Bootstrap 4+的card-deck应为水平排列卡片，出现垂直排列通常是以下情况导致：

• 使用了Bootstrap 3（该版本无card-deck类，误用或自定义样式引发垂直排列）
• 卡片未设置合适宽度，导致单张卡片占满父容器宽度
• 父容器的响应式约束限制了卡片横向排列

可行解决方案 #

方案1：确认并使用Bootstrap 4+版本

确保项目引入Bootstrap 4或更高版本的CSS文件，card-deck在该版本中默认实现水平等宽排列。若使用Bootstrap 3，建议升级或改用栅格系统。

方案2：用Bootstrap栅格系统替代（兼容更多场景）

依赖栅格系统（row + col-*）实现水平排列，灵活性更强：

@model IEnumerable<Employee>

@{ 
    ViewBag.Title = "Employee List";
}

<div class="row">
    @foreach (var employee in Model)
    {
        <div class="col-md-4 mb-3"> <!-- 中等屏幕及以上每行3张，可调整col-md-*数值改变每行数量 -->
            <div class="card h-100"> <!-- h-100保证同排卡片高度一致 -->
                <div class="card-header">
                    <h3>@employee.Name</h3>
                </div>
                <img class="card-img-top" src="~/images/naval-warfare.jpg" />
                <div class="card-footer text-center">
                    <a href="#" class="btn btn-primary">View</a>
                    <a href="#" class="btn btn-primary">Edit</a>
                    <a href="#" class="btn btn-danger">Delete</a>
                </div>
            </div>
        </div>
    }
</div>

方案3：修复现有card-deck样式

若坚持使用card-deck，可添加自定义CSS强制横向排列并设置卡片最小宽度：

@model IEnumerable<Employee>

@{ 
    ViewBag.Title = "Employee List";
}

<style>
    .card-deck {
        display: flex;
        flex-wrap: wrap;
    }
    .card-deck .card {
        flex: 1 0 25%; /* 每行4张，可调整百分比改变数量 */
        min-width: 280px; /* 防止卡片过窄 */
        margin: 1rem;
    }
</style>

<div class="card-deck">
    @foreach (var employee in Model)
    {
        <div class="card">
            <div class="card-header">
                <h3>@employee.Name</h3>
            </div>
            <img class="card-img-top" src="~/images/naval-warfare.jpg" />
            <div class="card-footer text-center">
                <a href="#" class="btn btn-primary">View</a>
                <a href="#" class="btn btn-primary">Edit</a>
                <a href="#" class="btn btn-danger">Delete</a>
             </div>
         </div>
    }
</div>

关键说明 #

• 栅格系统方案适配响应式布局，可通过col-sm-*、col-lg-*等类控制不同屏幕下的卡片数量
• 自定义CSS方案可精确控制卡片宽度与排列逻辑，适合定制化需求

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