循环生成Bootstrap网格按钮问题：非满行按钮无法点击原因

你遇到的这个问题，核心原因是分步修改innerHTML时浏览器会自动补全未闭合的HTML标签，导致你的Bootstrap网格结构完全混乱。

咱们来拆解一下你的代码执行过程：

1. 当你执行results.innerHTML = '<div class="row">'时，浏览器不会保留未闭合的<div>标签——它会自动补全为<div class="row"></div>，因为HTML不允许存在未闭合的块级元素。
2. 接下来你每次用innerHTML +=追加内容，都是在这个已经闭合的row后面直接加col元素，导致这些col根本不在row容器里面。
3. 当rowCount % 4 == 0时，你追加的</div><div class="row">会变成多余的闭合标签和新的空row，进一步破坏DOM结构。

这种情况下，满行的按钮可能刚好因为布局巧合能被正常交互，但非满行的按钮所在的DOM结构已经错乱（比如被放在错误的容器里，或者被浏览器自动修正的标签覆盖），所以无法点击。

解决办法很简单：先把所有HTML内容拼接成一个完整的字符串，最后一次性赋值给innerHTML，避免浏览器分步解析时自动补全标签。修改后的代码如下：

// 先初始化完整的字符串
let html = '<div class="row">';
let rowCount = 0; // 记得初始化rowCount！你的原代码里没做这一步，也是潜在问题

for (let i = 0; i < size; i++) {
  html += '<div class="col-md-3">' + button + '</div>';
  rowCount++;
  if (rowCount % 4 === 0) {
    html += '</div><div class="row">';
  }
}
// 闭合最后一个row
html += '</div>';

// 一次性赋值
results.innerHTML = html;

• 一定要初始化rowCount为0，原代码中缺失了这一步，会导致rowCount初始为undefined，undefined++会变成NaN，后续的取余判断完全失效。
• 如果你是用事件监听器（比如addEventListener）绑定按钮事件，分步修改innerHTML还会导致之前创建的元素被销毁重建，事件绑定丢失——一次性赋值也能避免这个问题。

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