Bootstrap三列布局动态插入数据库图片文本出现布局错位问题求解

预期效果 #

实际效果 #

问题原因 #

你当前的排版错位是Bootstrap栅格布局的常见问题，核心原因是循环生成的col-4元素高度不统一，下一行的第一个元素会被上一行最高的元素卡住，无法正常左对齐，导致整体布局混乱。

可行解决方案 #

你可以任选以下任意一种方案修复：

• 方案1：统一图片高度，避免高度参差不齐
  给图片标签添加固定高度和自适应裁剪属性，保证所有图片展示高度一致：

<img src="{{ $room->img }}" alt="" class="img-fluid" style="height: 280px; width: 100%; object-fit: cover;">

object-fit: cover会自动裁剪图片多余部分，保证图片不变形的同时填充满设定的尺寸。

• 方案2：强制每行高度对齐
  给外层row添加align-items-stretch类，同时给col-4添加d-flex flex-column类，让同一行所有列高度自动对齐到最高的那个元素的高度：

<div class="row align-items-stretch" style="margin-top: 8rem;">
   @foreach ($rooms as $room)
       <div class="col-4 d-flex flex-column" data-category="{{ $room->data_category}}">
            <a href="#zoomImg{{ $room->id }}" data-bs-toggle="modal" data-bs-target="#zoomImg{{ $room->id }}">
                <img src="{{ $room->img }}" alt="" class="img-fluid">                        
            </a>
            <div class="text-left mt-3 mb-5">
                <p class="product-subtitle">{{ $room->name }}</p>
                <h4 class="product-title">Shop the Look</h4>
                <a class="product-price-link" href="#getPriceByRoom{{ $room->id }}" data-bs-toggle="modal" data-bs-target="#getPriceByRoom{{ $room->id }}">get price</a>
           </div>
       </div>
   @endforeach
</div>

• 方案3：每3个元素新开一行容器
  如果前面两种方案都不符合你的需求，可以在循环中判断索引，每生成3个col-4就关闭当前row新开一个row，从根本上避免跨行错位：

<div class="row" style="margin-top: 8rem;">
    @foreach ($rooms as $index => $room)
        {{-- 每3个元素新开一行 --}}
        @if ($index % 3 == 0 && $index != 0)
            </div>
            <div class="row" style="margin-top: 8rem;">
        @endif
        <div class="col-4 mb-5" data-category="{{ $room->data_category}}">
            <a href="#zoomImg{{ $room->id }}" data-bs-toggle="modal" data-bs-target="#zoomImg{{ $room->id }}">
                <img src="{{ $room->img }}" alt="" class="img-fluid">                        
            </a>
            <div class="text-left mt-3">
                <p class="product-subtitle">{{ $room->name }}</p>
                <h4 class="product-title">Shop the Look</h4>
                <a class="product-price-link" href="#getPriceByRoom{{ $room->id }}" data-bs-toggle="modal" data-bs-target="#getPriceByRoom{{ $room->id }}">get price</a>
           </div>
        </div>
    @endforeach
</div>

注意这里把原来列内的mb-5移到了col-4上，避免内边距导致的高度计算偏差。

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