如何正确使用Div展示表单并修复点击添加按钮复制表单时的布局异常问题

看起来你踩了Bootstrap栅格系统的常见坑，同时JS代码里还有两个小细节问题，我帮你一步步解决：

问题根源 #

1. Bootstrap栅格结构错误：Bootstrap的col-*类元素必须是.row的直接子元素，你直接把col-lg-*的div放在#ownership里，破坏了栅格布局规则，导致排版错乱。
2. DOM元素id重复：克隆带id的元素会导致页面出现多个相同id的元素，这违反了HTML规范，还可能引发后续JS操作的问题。
3. JS选择器错误：你写的$('owner').append(newForm)少了id选择器的#，应该是$('#owner').append(newForm)。

修改方案与完整代码 #

下面是修复后的代码，同时优化了表单的可维护性：

<!-- 原始模板容器 -->
<div id="ownership" class="d-none"> <!-- 用d-none隐藏模板，避免初始显示重复内容 -->
  <div class="row mb-3"> <!-- 添加row容器，符合Bootstrap栅格规则 -->
    <div class="col-lg-12 mb-3"> 
      <label><b><span style="color:#e60000;">*</span> Name</b></label><br> 
      <input class="form-control owner-name" type="text"> <!-- 把id改成class，避免重复 -->
    </div> 
    <div class="col-lg-6 mb-3"> 
      <label><b><span style="color:#e60000;">*</span> Phone number</b></label><br> 
      <input class="form-control owner-phone" type="text"> <!-- 移除多余的input-group-prepend，这里不需要 -->
    </div> 
    <div class="col-lg-6 mb-3"> 
      <label><b><span style="color:#e60000;">*</span> Email</b></label><br> 
      <input class="form-control owner-email" type="email"> <!-- 移除多余的input-group-prepend -->
    </div>
    <div class="col-lg-12">
      <button type="button" class="btn btn-danger remove-owner">Remove</button> <!-- 添加删除按钮，提升体验 -->
    </div>
  </div>
</div>

<!-- 动态添加的表单容器 -->
<div id="owner-container">
  <!-- 先渲染一个初始的表单 -->
  <div class="row mb-3">
    <div class="col-lg-12 mb-3"> 
      <label><b><span style="color:#e60000;">*</span> Name</b></label><br> 
      <input class="form-control owner-name" type="text">
    </div> 
    <div class="col-lg-6 mb-3"> 
      <label><b><span style="color:#e60000;">*</span> Phone number</b></label><br> 
      <input class="form-control owner-phone" type="text">
    </div> 
    <div class="col-lg-6 mb-3"> 
      <label><b><span style="color:#e60000;">*</span> Email</b></label><br> 
      <input class="form-control owner-email" type="email">
    </div>
  </div>
</div>

<br> 
<div class="col-md-12"> 
  <button type="button" class="btn btn-success w-30 add_info f-r">Add</button> 
</div> 

<script> 
$(document).ready(function(){ 
  // 添加表单逻辑
  $(".add_info").click(function(){ 
    var newForm = $("#ownership").clone().removeClass('d-none'); // 克隆模板并移除隐藏类
    // 清空输入框值
    newForm.find('input').val('');
    // 移除模板的id，避免重复
    newForm.removeAttr('id');
    // 添加到容器
    $("#owner-container").append(newForm); 
  });

  // 删除表单逻辑（事件委托，处理动态添加的元素）
  $(document).on('click', '.remove-owner', function(){
    $(this).closest('.row').remove();
  });
}); 
</script>

关键修改点说明 #

• 给#ownership内部添加了.row容器，让col-*元素正确嵌套，恢复Bootstrap的栅格布局。
• 把表单元素的id改成class，避免克隆后出现重复id的问题。
• 给模板容器添加d-none类隐藏，避免初始页面显示重复的模板内容，同时初始渲染一个正常的表单供用户使用。
• 修复了JS选择器的错误，并且添加了删除按钮的逻辑（事件委托处理动态生成的元素）。
• 移除了多余的input-group-prepend容器，你这里的输入框不需要这个组件，它会导致输入框样式异常。

这样修改后，既能保留动态添加表单的功能，又能恢复正常的Bootstrap布局效果。

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