Bootstrap 动态插入图像的三列

Question

这就是我想要实现的：

但这是我得到的结果：

图片和文字是从数据库中插入的。这是代码：

<div class="row" style="margin-top: 8rem;">
   @foreach ($rooms as $room)
       <div class="col-4" 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>

我尝试以不同的方式定位@foreach，但仍然无法获得我想要的结果。有什么建议吗？

Answer 1

在 this article

上找到布局的解决方案

.masonry-container {
 column-count: 3;
 column-gap: 15px;
}
.masonry-item {
 display: inline-block;
 width: 100%;
}
.masonry-item img {
 display:block;
 width: 100%;
}

Bootstrap 动态插入图像的三列

Bootstrap three columns with dynamicaly inserted image

css

php

flexbox

laravel-blade

bootstrap-4