JavaScript中push生成Bootstrap布局时div自闭合导致结构混乱问题

哎，这个坑我之前刚好踩过！Bootstrap的row类本来就是用来包裹col-*元素的容器，要是row的div变成自闭合标签，那后面的col元素根本就不在row的控制范围内，布局肯定乱套。我来给你拆解问题和解决方案：

为什么会出现自闭合？ #

大概率是你在循环创建元素的时候写法出了问题：

• 用字符串拼接DOM时，不小心写成了<div class="row"/>（自闭合格式）；
• 用原生JS创建元素时，错误地使用了自闭合的标签字符串；
• 框架模板里没把col元素放在row标签的闭合范围内。

针对性解决方案 #

1. 原生JS创建元素（推荐） #

别用字符串拼接DOM，用原生API创建元素能彻底避免自闭合问题：

// 假设你的items数组示例
const items = [
  { content1: '内容1-1', content2: '内容1-2' },
  { content1: '内容2-1', content2: '内容2-2' }
];
const container = document.getElementById('your-container-id');

items.forEach(item => {
  // 创建row容器
  const row = document.createElement('div');
  row.classList.add('row');
  
  // 创建两个col-sm-6元素
  const colLeft = document.createElement('div');
  colLeft.classList.add('col-sm-6');
  colLeft.textContent = item.content1;
  
  const colRight = document.createElement('div');
  colRight.classList.add('col-sm-6');
  colRight.textContent = item.content2;
  
  // 把col塞进row，再把row塞进容器
  row.appendChild(colLeft);
  row.appendChild(colRight);
  container.appendChild(row);
});

2. 字符串拼接innerHTML（注意标签闭合） #

如果一定要用字符串拼接，必须确保row标签完整闭合，把col都放在row内部：

const items = [/* 你的数据 */];
let htmlStr = '';

items.forEach(item => {
  // 这里一定要写完整的<div class="row">...</div>，绝对不能自闭合！
  htmlStr += `
    <div class="row">
      <div class="col-sm-6">${item.content1}</div>
      <div class="col-sm-6">${item.content2}</div>
    </div>
  `;
});

document.getElementById('your-container-id').innerHTML = htmlStr;

3. 框架场景（Vue/React） #

如果你用Vue或者React，核心是把col元素放在row标签的内部范围：

Vue示例：

<template>
  <div class="container">
    <!-- 正确写法：col完全包裹在row内部 -->
    <div class="row" v-for="(item, index) in items" :key="index">
      <div class="col-sm-6">{{ item.content1 }}</div>
      <div class="col-sm-6">{{ item.content2 }}</div>
    </div>
  </div>
</template>

React示例：

function App() {
  const items = [/* 你的数据 */];
  return (
    <div className="container">
      {items.map((item, index) => (
        // 正确写法：col作为row的直接子元素
        <div className="row" key={index}>
          <div className="col-sm-6">{item.content1}</div>
          <div className="col-sm-6">{item.content2}</div>
        </div>
      ))}
    </div>
  );
}

核心要点总结 #

Bootstrap的row依赖正确的DOM结构——所有col-*必须是row的直接子元素。自闭合的<div class="row"/>会被浏览器解析成一个空的块级元素，后面的col元素会脱离row的布局控制，自然就乱了。只要保证row标签完整闭合，并且把col都放在row内部，布局就能恢复正常。

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