Spring Boot电影应用实现一行展示5个电影卡片的技术需求

我开发了一款基于Spring Boot的电影应用，期望在页面中一行展示5个电影卡片。以下是我当前的实现代码：

<div class="my-4 card-columns">
    <div class="card" th:each="movie : ${listMovies}">
        <a th:href="@{/movie/{id}(id=${movie.id})}">
            <img class="card-img-top"
                 th:src="${movie.photosImagePath}"/>
        </a>
        <div class="card-body">
            <h5 class="card-title" th:text="${movie.movieTitle}"></h5>
            <p class="card-text" th:text="${movie.movieGenre}"></p>
        </div>
    </div>
</div>

当前显示效果：

你使用的card-columns是Bootstrap的瀑布流布局组件，它会自动调整卡片排布但不会按固定行数展示。要实现一行固定5个卡片的需求，用Bootstrap的栅格系统配合响应式行列配置是更合适的方案：

修改后的代码如下：

<div class="my-4 row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-5 g-4">
    <div class="col" th:each="movie : ${listMovies}">
        <div class="card h-100">
            <a th:href="@{/movie/{id}(id=${movie.id})}">
                <img class="card-img-top"
                     th:src="${movie.photosImagePath}"
                     style="object-fit: cover; height: 200px;"/>
            </a>
            <div class="card-body">
                <h5 class="card-title" th:text="${movie.movieTitle}"></h5>
                <p class="card-text" th:text="${movie.movieGenre}"></p>
            </div>
        </div>
    </div>
</div>

核心改动说明： #

• 外层容器替换为row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-5 g-4：
  • row：启动Bootstrap栅格布局
  • row-cols-lg-5：大屏（≥992px）下一行显示5个卡片，直接满足需求
  • 其他row-cols-*参数为响应式配置，适配小屏幕尺寸，保证移动端体验
  • g-4：设置卡片之间的间距
• 每个电影卡片外层包裹col，作为栅格的列容器
• 给card添加h-100，让同一行的卡片高度统一，避免布局错乱
• 图片样式为可选配置：固定高度+object-fit: cover，保证图片比例一致，提升视觉整齐度

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