Bootstrap卡片循环渲染问题：成员卡片堆叠而非成行显示求助

嘿，我一眼就瞅出问题所在啦！你当前的代码把所有董事会成员的卡片都塞进了同一个col-sm-4容器里，这就导致Bootstrap的栅格系统没法把它们横向排列，自然只能堆叠起来了。

修正后的代码 #

<div class="row">
    @if(count($boardMembers) > 0)
        @foreach($boardMembers as $boardMember)
            <!-- 把列容器移到循环内部，每个卡片对应一个列 -->
            <div class="col-sm-4 my-4">
                <div class="card">
                    <img class="card-img-top" src="img/user1.jpg" alt="{{$boardMember->name}}">
                    <div class="card-body">
                        <h2 class="card-title">{{$boardMember->name}}</h2>
                        <!-- 这里可以补充其他卡片内容，比如职位、简介等 -->
                    </div>
                </div>
            </div>
        @endforeach
    @endif
</div>

关键修改点 #

• 把原本在循环外的col-sm-4 my-4容器移到@foreach循环内部，这样每个董事会成员的卡片都会被一个独立的列容器包裹。
• Bootstrap的栅格系统会自动在row容器里，把每个col-sm-4的元素横向排列（当屏幕宽度≥576px时，一行最多放3个；屏幕更小的时候会自动堆叠成单列，符合响应式设计）。

可选优化 #

如果想在更大屏幕上调整每行显示的卡片数量，可以修改列的类：

• col-md-3：中等屏幕及以上，一行放4个卡片
• col-lg-2：大屏幕及以上，一行放6个卡片

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