Javascript 将引导输入组克隆到表中

我正在将隐藏的输入组克隆到表中：

输入组：

      <div id="protoTextInput" class="input-group">
        <input type="text" class="form-control input-sm" value="tw.local." />
        <span class="input-group-btn">
            <button type="button" class="btn btn-info btn-sm" onclick="autoVar(this);"><i class="glyphicon glyphicon-flash"></i></button>
        </span>
      </div>

js克隆：

var filterTable = $('#filterTable').find('tbody');
    var i = (filterTable.find('tr').length + 1);
    filterTable.append(
      '<tr><td>' + i + '</td><td>Test</td><td>' + '</td><td></td>' + '<td><button onclick="remColumnFromFilters(this);" type="button" title="remove from filters" class="btn btn-danger btn-sm"><i class="glyphicon glyphicon-trash"></i> remove</button></td></tr>'
    );
    // Add operator select
    filterTable.find('tr:last td:nth-child(3)').append(
      $('#protoOperators').clone().attr('id', 'operator_' + i).show()
    );
    // Add Input for value
    filterTable.find('tr:last td:nth-child(4)').append(
      $('#protoTextInput').clone().attr('id', 'txt_' + i).show()
    );

var filterTable=$（'#filterTable'）。查找（'tbody'）；
变量i=（filterTable.find（'tr'）。长度+1）；
filterTable.append(
''+i+'测试'+''+'删除'
);
//添加操作员选择
filterTable.find（'tr:last td:nth child（3）'）。追加(
$（'#protoOperators'）.clone（）.attr（'id'，'operator#i'）.show（）
);
//为值添加输入
filterTable.find（'tr:last td:nth child（4）'）。追加(
$（'#protoTextInput'）.clone（）.attr（'id'，'txt'+i）.show（）
);

但是输入组被破坏（在输入和按钮之间中断）

---

知道为什么吗？

很明显，当我第一次在JSFIDLE上创建这个时，我使用了一个较新版本的jQuery，一切正常。-怎么回事

在我的代码中，我使用了导致中断的jqueryv1.11.2。v3.2.1可以按需要工作

---

因此，对于在同一问题中运行的任何人来说，这一点就留在这里。

您可以在表中设置输入的样式，使其不占用100%的宽度，这将解决您的样式设置问题：

#filterTable input.form-control.input-sm {
    width: calc(100% - 50px);
}

下面是一个工作示例：

---

根据我的经验，css中的calc（）在较旧的浏览器中无法正常工作。。。所以我通常不使用itcalc，因为它不适用于ie8。ie 9中存在漏洞（但与此问题无关），因此基本上您在那里是安全的：）