MVC列表数据Div容器排版错位求助（每行4项，需详细解释）

首先，先帮你修正一下Razor代码里的小问题——你漏掉了@符号来启动foreach代码块，否则视图无法正确解析循环：

<div class="row">
    @foreach (var item in PListe)
    {
        <div class="col-md-3">
            <figure class="figure">
                <img src="~/pictures/@(item.name).jpg" alt="@item.name">
                <figcaption class="figure-caption"> @item.name </figcaption>
            </figure>
        </div>
    }
</div>

接下来是你遇到的第二行错位问题，根源在于Bootstrap传统栅格的浮动布局特性：如果每行中某个col-md-3的内容高度不一样（比如图片高度不同、文字行数不同），下一行的第一个元素会被前一行最高的元素“卡”住，只能排在它的下方，从而出现大片空白。

下面给你三种解决方案，按推荐程度排序：

方案1：使用Bootstrap的row-cols类（最推荐，Bootstrap 4+适用） #

Bootstrap 4及以上引入了flexbox-based的栅格系统，row-cols可以直接指定每行的列数，自动处理对齐和换行，完全规避高度不一致导致的错位问题：

<div class="row row-cols-md-4 g-3">
    @foreach (var item in PListe)
    {
        <div class="col">
            <figure class="figure">
                <!-- 加上img-fluid让图片自适应容器，避免溢出 -->
                <img src="~/pictures/@(item.name).jpg" alt="@item.name" class="img-fluid">
                <figcaption class="figure-caption">@item.name</figcaption>
            </figure>
        </div>
    }
</div>

关键解释： #

• row-cols-md-4：表示在中等屏幕（≥768px）下，每行自动排列4个列；小屏幕会自动堆叠成单列，符合响应式要求。
• g-3：设置列之间的间距（gap），替代旧版的padding/margin，布局更整洁。
• 不需要再写col-md-3，row-cols会自动计算每个列的宽度。
• img-fluid：确保图片不会超出容器宽度，避免因图片尺寸不一导致列宽异常。

方案2：强制所有列高度一致（兼容旧版Bootstrap） #

如果你使用的是Bootstrap 3，或者不想改变栅格写法，可以用flexbox让每个列的高度统一：

<div class="row">
    @foreach (var item in PListe)
    {
        <div class="col-md-3 d-flex flex-column mb-4">
            <figure class="figure flex-grow-1">
                <img src="~/pictures/@(item.name).jpg" alt="@item.name" class="img-fluid">
                <figcaption class="figure-caption">@item.name</figcaption>
            </figure>
        </div>
    }
</div>

关键解释： #

• d-flex flex-column：把列变成flex容器，内容垂直排列。
• flex-grow-1：让figure元素占满列的剩余高度，强制所有列的高度和最高的那列保持一致。
• mb-4：给每个列添加底部margin，避免行与行之间过于拥挤。

方案3：手动强制换行（传统方法） #

通过在每4个元素后添加一个清除浮动的div，强制换行，不管列的高度如何：

<div class="row">
    @foreach (var item in PListe.Select((produkt, index) => new { Produkt = produkt, Index = index }))
    {
        <div class="col-md-3 mb-4">
            <figure class="figure">
                <img src="~/pictures/@(item.Produkt.name).jpg" alt="@item.Produkt.name" class="img-fluid">
                <figcaption class="figure-caption">@item.Produkt.name</figcaption>
            </figure>
        </div>

        <!-- 每4个元素后添加换行标记，仅在中等屏幕及以上生效 -->
        @if ((item.Index + 1) % 4 == 0)
        {
            <div class="w-100 d-none d-md-block"></div>
        }
    }
</div>

关键解释： #

• Select((p, index) => ...)：给每个元素绑定索引，方便判断是否到了第4个元素。
• w-100：宽度100%，强制占据整行，触发换行。
• d-none d-md-block：只在中等屏幕及以上显示，小屏幕下不需要强制换行（会自动堆叠）。

总结 #

优先用方案1，它是Bootstrap官方推荐的现代写法，代码简洁且能完美解决布局错位问题。如果必须兼容旧版本Bootstrap，再考虑方案2或3。

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