动态增加列数时应使用无数字后缀的col类实现等宽自适应，配合d-flex和flex-wrap控制换行，避免col-*类因总和超12导致错行；需注意gutter表现、内容约束及批量插入优化。
动态增加列数时，col-* 类不能靠 JS 拼字符串硬加
直接用 JavaScript 给 .row 追加带 col-md-4 的 div 是可行的，但关键在于：列数总和必须始终 ≤12，否则在小屏幕下会换行错乱。Bootstrap 的栅格系统不是“自动均分”，而是按类名预设比例计算宽度（如 col-4 = 4/12 = 33.333%），它不感知你加了多少个——只按类名生效。
- 不要写
el.innerHTML += '<div class="col-3">...</div>'后就不管了；得同步检查当前行已有列的col-*值总和 - 如果已存在
col-6和col-4（共10份），再加一个col-3就超了，浏览器会把它挤到下一行，视觉上“断层” - 更稳妥的做法是统一用
col（无数字后缀）让子项等宽自适应，再配合d-flex和flex-wrap控制换行逻辑
col + d-flex 是最可控的动态列方案
当列数不确定、可能随时增删时，放弃固定比例类（如 col-4），改用无数字的 col 类，它会让所有同级列平均分配父容器宽度，且天然支持 Flex 行为。
-
col本质是flex: 1 0 0，即“放大填满、不缩小、基础宽为0”，所以加多少个都自动均分 - 必须确保父容器是
display: flex——Bootstrap 5 中.row默认已是，但 Bootstrap 4 需显式加d-flex - 若要限制单行最多显示 N 列（比如最多 4 列，多了就折行），用
flex-wrap: wrap（默认就有）+ 设置.col的min-width或用响应式类如col-sm控制断点 - 示例：
<div class="row"> <div class="col">Item 1</div> <div class="col">Item 2</div> <div class="col">Item 3</div> </div>
JS 动态插入新<div class="col">Item 4</div>即可，无需算比例
用 data-col-count 控制最大列数并自动重排
纯 CSS 无法根据子元素数量调整布局，但可以用轻量 JS 监听变化，并动态切换类名来触发响应式行为。
- 给
.row加data-col-count="3"，JS 根据该值决定是否添加flex-nowrap或设置max-width约束 - 列数 ≤3 时保持单行：加
flex-nowrap并给每个.col设flex: 0 0 calc(100% / 3)（需 CSS 变量或内联 style） - 列数 >3 时允许换行：移除
flex-nowrap，让col回归默认均分逻辑 - 避免在循环中反复 setAttribute 触发重排；建议用 documentFragment 批量插入，再一次性 append
注意 gutters 在动态列下的表现
Bootstrap 的间距（gutter）靠 .row 的负 margin 和 .col 的 padding 实现，这在动态增删列时依然有效，但有边界情况：
- 最后一列右侧、第一列左侧的 padding 仍存在，可能造成外边距不对称；若需严格居中，给
.row加mx-n2抵消，再在外层包一层px-2 - 使用
col时 gutter 宽度固定（如g-3= 1rem），但列宽变小后，视觉上“间隙占比”会变大，容易显得松散；此时可搭配g-sm-2等响应式 gutter 类微调 - 绝对定位元素（如 badge、close 按钮）放在
.col内时，不会影响 flex 计算高度，但可能遮挡 gutter 区域，需额外用z-index或top/right微调
img-fluid 或文字未设 word-break，会导致某列突然变高，破坏 col 的视觉均等——这不是列数问题，是内容层没约束。
