如何在Bootstrap中无缝合并grid容器父子行 实现Livewire商品无限流布局

问题根因 #

布局错乱本质是嵌套的独立grid容器导致的：每个新加载的.products-grid都是独立的网格布局上下文，内部商品只会在自身容器的网格里排版，无法和外层容器的商品共用布局流，所以每次加载都会强制开新行。

方案1：纯CSS修复（优先推荐） #

无需修改任何DOM结构、Livewire逻辑，完全保留所有wire:id属性，仅需新增一行CSS规则即可：

/* 让嵌套的grid容器不参与布局，子元素直接继承父级网格上下文 */
.products-grid .products-grid {
    display: contents;
}

实现逻辑

display: contents会让匹配到的嵌套容器不生成任何盒模型，它内部的商品元素会直接提升到外层.products-grid的布局层级，和上层商品共用同一个网格排版规则，自动填充上一行的剩余空位。该属性兼容性覆盖所有主流现代浏览器，完全适配Bootstrap框架运行环境，且不会对Livewire的交互逻辑产生任何影响。

注意事项

如果嵌套的.products-grid上绑定了margin、padding、border等盒模型相关样式，需要将这些样式迁移到外层容器或者商品元素上，display: contents会忽略元素本身的盒模型样式。

方案2：调整Livewire组件结构（备选） #

如果需要兼容极老旧的移动端设备（不支持display: contents），可以调整Livewire加载组件的结构：

1. 外层页面保留唯一的.products-grid网格容器
2. 负责加载下一页的子组件根元素保留wire:id，但去掉.products-grid类，根元素直接设置display: contents，组件内部只返回商品<main>元素，不嵌套新的网格容器
   该方案同样可以保留所有wire:id属性，从根源上避免嵌套网格的产生。

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