使用Liquid构建动态仪表板：col-md-4无法换行问题求助

核心问题分析 #

• 关键变量未定义：代码中使用的columnNumber变量未赋值，导致modulo运算无法得到有效结果，后续的行切换判断完全失效，所有col-md-4都被包裹在同一个初始<div class="row">里，这是所有列挤在同一行的根本原因。

修复后的代码 #

<h1><i class="fa fa-pie-chart" aria-hidden="true"></i> Global Dashboard</h1>
<div class="container" id="global-dashboard">

  {%- assign ListResult = "6,99,4,6,8" -%}
  {%- assign ListResult = ListResult | split: "," -%}
  {%- assign columnNumber = 3 -%} <!-- 定义每行显示的列数，col-md-4对应每行3列，适配Bootstrap12栅格系统 -->
  
  {%- for result in ListResult -%}
    {%- assign resultModule = forloop.index0 | modulo: columnNumber -%}
    {%- if forloop.index0 == 0 -%}
      <div class="row">
    {%- elsif resultModule == 0 -%}
      </div>
      <div class="row">
    {%- endif -%}
      <div class="col-md-4 col-dashboard-enx">
        <p class="data-aggregation-number">{{ result }}</p>
        <p class="data-aggregation-description">{{ "any string about description" }}</p>
      </div>
    {%- if forloop.last == true -%}
      </div>
    {%- endif -%}
  {%- endfor -%}
</div>

关键说明 #

• 新增{%- assign columnNumber = 3 -%}：明确每行显示3列，刚好匹配col-md-4的宽度（Bootstrap12栅格系统中3*4=12，占满一行）。
• 原逻辑的行切换逻辑本身是合理的：
  • 第一个元素（index0=0）时开启第一个row；
  • 每到第columnNumber个元素的起始位置（index0为3、6...），先闭合上一个row，再开启新row；
  • 循环结束时闭合最后一个row，避免标签未闭合的问题。

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