Bootstrap动态表单点击加号在同一行新增两个输入框问题求助

核心问题原因 #

1. HTML存在重复ID：id属性在页面中必须唯一，你给两个列容器都设置了id="columna"，JS执行时只会匹配到第一个列容器，所有新增输入框都被插入到了同一个列内，自然会垂直排列。
2. 新增逻辑不符合栅格规则：你使用的Bootstrap栅格系统要求每行（.row）的直接子元素必须是列（.col），输入框需要放在列容器内才能实现同行排列，直接往列里追加多个输入框只会垂直堆叠。

修改方案 #

1. HTML修改 #

删除两个列容器的重复id，保留行容器的id="campo"即可，修改后的相关片段如下：

<div class="container" id="contenedor">
  <div class="row" id="campo">
    <div class="col">
      <input type="text" class="form-control" placeholder="Infraestructura">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Infraestructura">
    </div>
  </div>
</div>

如果需要限制每行最多放2个输入框，避免新增过多后挤压变形，可以把.col替换为.col-6，固定每列占行宽的50%。

2. JS代码修改 #

调整DOM选择逻辑和新增/删除逻辑，每次点击新增两个带列容器的输入框，删除时同步删除最后两个输入框对应的列容器：

var field_row = document.getElementById('campo');
var add_more_fields = document.getElementById('add_more_fields');
var remove_fields = document.getElementById('remove_fields');

function Añadir(){
    // 创建第一个列+输入框
    var col1 = document.createElement('div');
    col1.setAttribute('class','col'); // 要固定宽度就改成col-6
    var newField1 = document.createElement('input');
    newField1.setAttribute('type','text');
    newField1.setAttribute('class','form-control');
    newField1.setAttribute('placeholder','Another Field');
    col1.appendChild(newField1);
    field_row.appendChild(col1);

    // 创建第二个列+输入框
    var col2 = document.createElement('div');
    col2.setAttribute('class','col'); // 要固定宽度就改成col-6
    var newField2 = document.createElement('input');
    newField2.setAttribute('type','text');
    newField2.setAttribute('class','form-control');
    newField2.setAttribute('placeholder','Another Field');
    col2.appendChild(newField2);
    field_row.appendChild(col2);
}

function Eliminar(){
    var col_tags = field_row.getElementsByTagName('div');
    // 至少保留2个初始输入框，所以列数大于2时才允许删除
    if(col_tags.length > 2) {
        // 每次删除最后两列
        field_row.removeChild(col_tags[col_tags.length - 1]);
        field_row.removeChild(col_tags[col_tags.length - 1]);
    }
}

如果你的需求是每次点击新增一整行（每行固定两个输入框），只需要修改Añadir函数的逻辑，先新建.row容器，再把两个列加进去，最后把整行追加到#contenedor容器即可。

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