Laravel中如何在循环内让<div>并排，每行展示4个成员？

我正在开发一个校友门户，需要展示委员会成员详情，要求每行显示4个成员，换行后继续显示接下来的4个。以下是我当前的Laravel代码：

<h2>Member Details</h2>
<div class="jumbotron container">
    <div class="pull-right">
        <a class="btn btn-primary" data-toggle="modal" id="mediumButton" data-target="#mediumModal" data-attr="{{ route('add_details')}}" title="Add Institute Details"> 
            <i class="fas fa-plus-circle"></i>
        </a>
    </div>
    
    <div class="container main" id="wrapper"> 
            @foreach ($members as $member)
                <div class="img-box">
                    <pre>
                    <img src="/uploads/image/{{ $member->image }}" width="100" height="100"/>
                    &nbsp; &nbsp; &nbsp; {{ $member->id }}<br/>
                    <a> &nbsp;  {{ $member->name }}</a>
                    
                    <!-- @if(($member->id) >=5 )
                    <span style="white-space: pre-line">
                    </span> 
                    @endif
                    </pre> -->
                </div>
            @endforeach
    </div>
</div>

解决方案 #

方案1：CSS Grid布局（推荐） #

纯前端实现，无需修改后端逻辑，布局更灵活且支持响应式适配。

修改后的Blade代码

<h2>成员详情</h2>
<div class="jumbotron container">
    <div class="pull-right">
        <a class="btn btn-primary" data-toggle="modal" id="mediumButton" data-target="#mediumModal" data-attr="{{ route('add_details')}}" title="添加机构详情"> 
            <i class="fas fa-plus-circle"></i>
        </a>
    </div>
    
    <div class="container main member-grid" id="wrapper"> 
        @foreach ($members as $member)
            <div class="img-box member-card">
                <img src="/uploads/image/{{ $member->image }}" width="100" height="100"/>
                <div>{{ $member->id }}</div>
                <a>{{ $member->name }}</a>
            </div>
        @endforeach
    </div>
</div>

配套CSS样式

/* 核心布局：每行4个成员 */
.member-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px; /* 成员间的间距 */
    padding: 10px 0;
}

/* 成员卡片样式 */
.member-card {
    text-align: center;
    padding: 10px;
}

/* 响应式适配：小屏幕自动调整列数 */
@media (max-width: 768px) {
    .member-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .member-grid {
        grid-template-columns: 1fr;
    }
}

方案2：Laravel集合分组 #

通过后端将成员按每组4个拆分，再循环渲染每组。

修改后的Blade代码

<h2>成员详情</h2>
<div class="jumbotron container">
    <div class="pull-right">
        <a class="btn btn-primary" data-toggle="modal" id="mediumButton" data-target="#mediumModal" data-attr="{{ route('add_details')}}" title="添加机构详情"> 
            <i class="fas fa-plus-circle"></i>
        </a>
    </div>
    
    <div class="container main" id="wrapper"> 
        @foreach ($members->chunk(4) as $memberGroup)
            <div class="member-row">
                @foreach ($memberGroup as $member)
                    <div class="img-box member-card">
                        <img src="/uploads/image/{{ $member->image }}" width="100" height="100"/>
                        <div>{{ $member->id }}</div>
                        <a>{{ $member->name }}</a>
                    </div>
                @endforeach
            </div>
        @endforeach
    </div>
</div>

配套CSS样式

.member-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.member-card {
    text-align: center;
    flex: 0 0 calc(25% - 15px);
}

@media (max-width: 768px) {
    .member-card {
        flex: 0 0 calc(50% - 10px);
    }
}

@media (max-width: 480px) {
    .member-card {
        flex: 0 0 100%;
    }
}

注意事项 #

• 移除了原代码中的<pre>标签，该标签会强制保留文本格式和空格，导致布局混乱。
• 优先选择CSS方案，前端布局更灵活，响应式适配更便捷。
• 两种方案均支持成员数量非4的倍数的情况，最后一行会自动显示剩余成员。

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