Shopify产品页三列布局循环渲染每3列换行失效问题求助

问题原因 #

• 你给父容器.impact-items设置了Flex布局，但Flex默认是flex-wrap: nowrap不换行属性，所有子元素会强制挤在同一行，不会自动换行。
• 如果你当前主题使用Bootstrap栅格系统，col-*类的直接父元素需要添加row类才能触发栅格自带的换行、边距适配逻辑，你当前缺少该配置。

修复方案 #

方案1（优先，适配Bootstrap栅格规则） #

直接修改父容器的类名，给.impact-items加上row类即可：

<!-- 修改前 -->
<div class="impact-items">
<!-- 修改后 -->
<div class="row impact-items">

row类自带display: flex; flex-wrap: wrap以及适配栅格的负边距配置，无需额外修改CSS即可生效。

方案2（仅修改CSS） #

如果你不想改动HTML结构，直接在现有CSS里给.impact-items新增换行属性即可：

.impact-items {
 display:flex;
 flex-wrap: wrap; /* 新增这行开启自动换行 */
 width: 100%;
 /* 如果你用Bootstrap栅格，可以补上下面两行适配边距 */
 margin-left: -15px;
 margin-right: -15px;
}

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