如何调整表单动态增删输入框样式 实现按钮右置避免布局挤压

两个布局问题可以通过调整DOM结构、复用Bootstrap自带的弹性布局工具类解决，同时修复原有代码里的事件绑定失效、新增输入框样式缺失的bug。

1. 操作按钮移到输入框右侧实现 #

原有代码把按钮直接放在输入框同级，默认块级元素会换行，而且外层容器宽度设置过窄（col-4）不足以放下输入框+两个按钮。调整结构如下：

• 把外层容器宽度从col-4调整为col-8（可根据实际需求调整宽度，只要足够容纳输入框+按钮即可）
• 单行输入框和按钮用d-flex弹性容器包裹，实现水平排列、垂直居中
• 给按钮补上缺失的事件绑定class，去掉冗余的label嵌套，加样式避免按钮文字换行

对应HTML结构修改：

<div class="form-group row">
   <label for="validationNumber" class="col-2 col-form-label">Contact:</label> 
   <div class="col-8">
      <!-- 首行输入区：弹性布局实现输入框+按钮水平排列 -->
      <div class="d-flex align-items-center mb-2">
        <input id="validationNumber" name="phonenumber" type="text" class="form-control" pattern="\b\d{8}\b" required>
        <a href="javascript:;" class="add-btn text-primary ml-2" style="cursor: pointer;white-space: nowrap;">Add</a>
        <a href="javascript:;" class="remove-btn text-danger ml-2" style="cursor: pointer;white-space: nowrap;">remove</a>
      </div>
      <div id="new_chq"></div>
      <input type="hidden" value="1" id="total_chq">
      <div class="invalid-feedback">
         Enter a correct PhoneNumber!
      </div>
   </div>
</div>

兼容说明：如果使用Bootstrap5版本，可以把按钮上的ml-2换成容器上的gap-2，间距效果一致。

2. 动态新增输入框拥挤挤压问题修复 #

原有代码新增的输入框存在两个问题：一是没有加form-control类，导致输入框样式和首行不一致、宽度错乱；二是每一行输入项没有统一间距，容易挤在一起。
修改JS逻辑，让新增的输入项和首行结构完全一致，统一加间距和样式：

// 修正事件绑定选择器，和HTML里的class对应
$('.add-btn').on('click', add);
$('.remove-btn').on('click', remove);

function add() {
  var new_chq_no = parseInt($('#total_chq').val()) + 1;
  // 新增项和首行结构保持一致，统一弹性布局、间距、表单样式
  var new_input = `
  <div class="d-flex align-items-center mb-2" id="new_${new_chq_no}_wrap">
    <input type='text' id='new_${new_chq_no}' name='phonenumber' class='form-control' pattern='^[0-9]{8}$' required>
    <div class='invalid-feedback'>Enter a correct PhoneNumber!</div>
  </div>`;
  $('#new_chq').append(new_input);
  $('#total_chq').val(new_chq_no);
}

function remove() {
  var last_chq_no = $('#total_chq').val();
  if (last_chq_no > 1) {
    // 删除时移除整个外层容器，避免残留无效DOM占位置
    $(`#new_${last_chq_no}_wrap`).remove();
    $('#total_chq').val(last_chq_no - 1);
  }
}

关键样式逻辑说明 #

• d-flex align-items-center：让容器内的输入框、按钮自动水平排列，且垂直方向居中对齐，输入框默认占满剩余宽度，按钮自动靠右侧显示
• mb-2：给每一行输入项加底部外边距，保证上下行输入框有统一间距，不会贴在一起
• 所有输入框统一使用form-control类：保证所有输入框的宽度、内边距、边框样式完全统一，不会出现宽度错乱挤压的问题
• 按钮加white-space: nowrap：避免小屏幕下按钮文字折行打乱布局

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