如何在Laravel循环中实现图片并排显示

当前@foreach循环渲染的图片呈垂直排列，可通过以下几种方案调整为并排布局：

方案1：基于Bootstrap栅格系统（适配现有代码） #

原代码中每个图片块的col-md-6会独占半行，且未在外层包裹row容器，导致垂直排列。调整如下：

修改后代码 #

<div class="row">
    @foreach ($dataLevelTiga as $keyTiga => $itemTiga)
        @if ($itemTiga->opsi_jawaban != 'option')
            @php
                $dataDetailJawabanText = \App\Models\JawabanTextModel::select('jawaban_text.id', 'jawaban_text.id_pengajuan', 'jawaban_text.id_jawaban', 'jawaban_text.opsi_text', 'item.id as id_item', 'item.nama')
                    ->join('item', 'jawaban_text.id_jawaban', 'item.id')
                    ->where('jawaban_text.id_pengajuan', $dataUmum->id)
                    ->where('jawaban_text.id_jawaban', $itemTiga->id)
                    ->get();
            @endphp
            @foreach ($dataDetailJawabanText as $itemTextTiga)
                @if ($itemTextTiga->nama != 'Ratio Tenor Asuransi')                                               
                    @if ($itemTiga->opsi_jawaban == 'file')
                        <div class="col-md-4 mb-3">
                            <label class="d-block mb-1">{{ $itemTextTiga->nama }}</label>
                            <b>Jawaban: </b>
                            <div class="mt-2">
                                @php
                                    $file_path = asset("upload/{$dataUmum->id}/{$itemTiga->id}/{$itemTextTiga->opsi_text}");
                                    $file_parts = pathinfo($file_path);
                                @endphp
                                @if ($file_parts['extension'] == 'pdf')
                                    <iframe src="{{ $file_path }}" width="100%" height="250px"></iframe>
                                @else
                                    <img src="{{ $file_path }}" alt="{{ $itemTextTiga->nama }}" class="img-fluid" style="max-width: 300px; height: auto;">
                                @endif
                            </div>
                        </div>         
                    @endif
                @endif
            @endforeach
        @endif
    @endforeach
</div>

关键修改点 #

• 外层添加row容器，确保栅格系统正常工作
• 将图片块容器改为col-md-4（一行显示3个，可根据需求调整为col-md-3/col-md-5等）
• 合并标签与内容到同一个列容器，避免布局错乱
• 优化文件路径写法，简化代码
• 添加mb-3类给每个块设置底部间距，提升排版美观度

方案2：自定义Flexbox布局（无需Bootstrap） #

如果项目未使用Bootstrap，可通过Flexbox实现并排：

Blade代码调整 #

<div class="image-flex-container">
    @foreach ($dataLevelTiga as $keyTiga => $itemTiga)
        @if ($itemTiga->opsi_jawaban != 'option')
            @php
                $dataDetailJawabanText = \App\Models\JawabanTextModel::select('jawaban_text.id', 'jawaban_text.id_pengajuan', 'jawaban_text.id_jawaban', 'jawaban_text.opsi_text', 'item.id as id_item', 'item.nama')
                    ->join('item', 'jawaban_text.id_jawaban', 'item.id')
                    ->where('jawaban_text.id_pengajuan', $dataUmum->id)
                    ->where('jawaban_text.id_jawaban', $itemTiga->id)
                    ->get();
            @endphp
            @foreach ($dataDetailJawabanText as $itemTextTiga)
                @if ($itemTextTiga->nama != 'Ratio Tenor Asuransi')                                               
                    @if ($itemTiga->opsi_jawaban == 'file')
                        <div class="image-flex-item">
                            <label class="d-block mb-1">{{ $itemTextTiga->nama }}</label>
                            <b>Jawaban: </b>
                            <div class="mt-2">
                                @php
                                    $file_path = asset("upload/{$dataUmum->id}/{$itemTiga->id}/{$itemTextTiga->opsi_text}");
                                    $file_parts = pathinfo($file_path);
                                @endphp
                                @if ($file_parts['extension'] == 'pdf')
                                    <iframe src="{{ $file_path }}" width="100%" height="250px"></iframe>
                                @else
                                    <img src="{{ $file_path }}" alt="{{ $itemTextTiga->nama }}" style="width: 100%; height: auto;">
                                @endif
                            </div>
                        </div>         
                    @endif
                @endif
            @endforeach
        @endif
    @endforeach
</div>

新增CSS样式 #

.image-flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem; /* 图片块之间的间距 */
    padding: 0.5rem;
}
.image-flex-item {
    flex: 0 0 calc(33.333% - 1rem); /* 一行3个，减去间距 */
    min-width: 250px; /* 小屏幕自动换行 */
}

方案3：CSS Grid布局 #

通过Grid实现更灵活的自动排列：

Blade代码调整 #

<div class="image-grid-container">
    @foreach ($dataLevelTiga as $keyTiga => $itemTiga)
        @if ($itemTiga->opsi_jawaban != 'option')
            @php
                $dataDetailJawabanText = \App\Models\JawabanTextModel::select('jawaban_text.id', 'jawaban_text.id_pengajuan', 'jawaban_text.id_jawaban', 'jawaban_text.opsi_text', 'item.id as id_item', 'item.nama')
                    ->join('item', 'jawaban_text.id_jawaban', 'item.id')
                    ->where('jawaban_text.id_pengajuan', $dataUmum->id)
                    ->where('jawaban_text.id_jawaban', $itemTiga->id)
                    ->get();
            @endphp
            @foreach ($dataDetailJawabanText as $itemTextTiga)
                @if ($itemTextTiga->nama != 'Ratio Tenor Asuransi')                                               
                    @if ($itemTiga->opsi_jawaban == 'file')
                        <div class="image-grid-item">
                            <label class="d-block mb-1">{{ $itemTextTiga->nama }}</label>
                            <b>Jawaban: </b>
                            <div class="mt-2">
                                @php
                                    $file_path = asset("upload/{$dataUmum->id}/{$itemTiga->id}/{$itemTextTiga->opsi_text}");
                                    $file_parts = pathinfo($file_path);
                                @endphp
                                @if ($file_parts['extension'] == 'pdf')
                                    <iframe src="{{ $file_path }}" width="100%" height="250px"></iframe>
                                @else
                                    <img src="{{ $file_path }}" alt="{{ $itemTextTiga->nama }}" style="width: 100%; height: auto;">
                                @endif
                            </div>
                        </div>         
                    @endif
                @endif
            @endforeach
        @endif
    @endforeach
</div>

新增CSS样式 #

.image-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 0.5rem;
}

内容的提问来源于stack exchange，提问作者16_Hafidz Fadhillah Febrianto