使用row div为何呈现列布局？需实现每行3-4个卡片的网格

核心原因 #

1. 你的代码里每个row只包裹了一个col-md-4：Bootstrap栅格系统一行是12列，col-md-4占4列，正常一行要放3个这类列才能实现每行3个卡片；但你现在每个row里只有一个列，自然会让每个卡片独占一行，呈现列状排列。
2. 大概率你是把整个row标签也放进了循环里，导致每遍历一个$item就生成一个独立的row，进一步加剧了每行只显示一个卡片的问题。

修正后的代码示例 #

把循环放在row内部，让多个col-md-4处于同一个row下：

<div class="row">
    @foreach($items as $item)
        <div class="col-md-4 mb-3"> <!-- mb-3用于增加卡片间距，避免拥挤 -->
            <div class="card"> <!-- 加上card类，让内容成为标准卡片样式 -->
                <div class="card-body">
                    <h3 class="card-title">
                        {{$item->quantity}}<br>
                        {{$item->price}}<br>
                        {{$item->dish->name}}
                    </h3>
                    <hr>
                </div>
            </div>
        </div>
    @endforeach
</div>

额外调整建议 #

• 若要实现每行4个卡片，把col-md-4替换成col-md-3（12列÷3=4列/行）。
• 确认已正确引入Bootstrap的CSS文件，否则栅格类不会生效，布局会完全错乱。
• 检查你自定义的d-flex、separator-solid样式，确保没有设置width: 100%或其他会强制列独占一行的属性。

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