如何让PrestaShop首页产品分类DIV实现上下堆叠排列？

问题根源 #

分类DIV横向并排，基本是模块CSS给容器加了float:left、display:inline-block或者flex横向排列的样式，导致区块无法自动换行堆叠。

具体解决步骤 #

方法1：给分类容器添加独占宽度的自定义类 #

在模板的分类DIV标签里新增自定义类（比如full-width-category）：

{foreach from=$blocks item=block}
  <div id="hppContainer{$block->id|escape:'int':'utf-8'}" class="full-width-category {if $block->carousell==1}hppContainerBlockMainDiv hppCarouselBlock{/if}">
    <!-- 原有的标题、产品列表代码保持不变 -->
  </div>
{/foreach}

然后在主题的assets/css/custom.css或者模块自带的CSS文件中添加样式：

.full-width-category {
  width: 100%;
  display: block;
  clear: both; /* 清除之前的浮动影响 */
  margin-bottom: 2rem; /* 可选：给分类之间增加间距，提升视觉效果 */
}

方法2：直接修改模块原有样式 #

找到模块的CSS文件（比如modules/hpp/css/hpp.css），定位到控制hppContainerBlockMainDiv的样式，修改为：

.hppContainerBlockMainDiv {
  width: 100% !important;
  float: none !important;
  display: block !important;
  clear: both !important;
}

添加!important是为了确保覆盖模块原有样式，保证修改生效。

方法3：排查Bootstrap网格类冲突 #

如果你的主题使用了Bootstrap框架，检查分类容器是否被错误添加了col-xx类（比如col-md-6这类会让区块占据半宽的类），如果有，将其替换为col-12或者直接移除。

验证效果 #

修改完成后清空PrestaShop缓存并刷新首页，分类区块会自动上下依次排列，ROPES分类将显示在RIBBONS分类下方，和预期效果一致。

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