如何点击后在现有div右侧生成相同div且保持Bootstrap布局响应性

• 原有JS逻辑将新生成的卡片直接插入到body末尾，没有放到加密货币区域的Bootstrap栅格行容器中，无法跟随原有布局排列
• 新增卡片未套col-3类（Bootstrap栅格一行共12列，col-3刚好支持每行放4个元素），排版规则不统一
• 重复定义了new-div样式，可直接复用原有crypto-div样式，无需冗余代码
• 使用了p1/p3/p5非标准HTML标签，替换为普通p标签即可，不影响展示效果还符合规范

1. HTML修改 #

给存放加密货币卡片的行容器添加唯一id，方便JS选中插入，同时添加g-3类设置列间距，避免卡片贴在一起：

<!-- 原有代码 <div class='row mx-auto'> 替换为以下内容 -->
<div class='row mx-auto g-3' id="cryptoRow">

2. CSS修改 #

删除CSS中冗余的.new-div相关全部样式，直接复用已有的.crypto-div样式即可，同时删除CSS中空的无效属性（比如margin-left: px;、background-color:;这类空值属性）。

3. JavaScript修改 #

重写newDiv函数，逻辑改为将新生成的卡片套入col-3列容器后，插入到加密货币区域的行容器中：

function newDiv() {
  // 获取加密货币卡片所在的行容器
  const cryptoRow = document.getElementById('cryptoRow');
  // 创建Bootstrap列容器，col-3对应一行放4个
  const colWrapper = document.createElement('div');
  colWrapper.className = 'col-3';
  // 填充卡片内容，复用原有crypto-div样式
  colWrapper.innerHTML = `
    <div class='crypto-div p-3'>
      <h1>Bitcoin</h1>
      <p>Price: $45,000</p>
      <br>
      <p class='mt-3'>24hr high: $50,000</p>
      <br>
      <p class='mt-3'>24hr low: $42,000</p>
      <br>
      <p>Ranking: 1</p>
    </div>
  `;
  // 将新生成的列插入到行容器末尾
  cryptoRow.appendChild(colWrapper);
}

修改完成后点击放大镜图标，新的比特币信息卡片会自动排在现有卡片的右侧，一行放满4个后自动换行到下一行最左侧，完全符合需求。

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