如何防止input-group-append挤压右侧相邻input-group的宽度

问题本质 #

input-group默认采用弹性盒布局，内部元素宽度会跟随内容动态调整，input-group-append按钮从无到有时会占用当前行的布局宽度，自然会挤压同属一行的其他输入框。

可直接使用的解决方法（无需修改input本身） #

• 方法1：给条件渲染的按钮预留固定占位
  不要用销毁元素/display:none的方式控制按钮显隐，改为控制visibility属性，按钮不展示时也保留原有宽度，不会触发整体布局重排：
  自定义CSS：

  .conditional-append-btn {
    visibility: hidden;
  }
  .conditional-append-btn.show {
    visibility: visible;
  }
  

  逻辑判断时仅切换show类即可，按钮隐藏时依然占住对应位置，不会挤压相邻输入框。
• 方法2：给并排输入框提前分配独立宽度区间
  给每个input-group外层套列容器，提前固定各自的宽度占比，内部宽度变化不会影响相邻容器：
  参考结构：

  <div class="row g-0">
    <div class="col-6">
      <!-- 第一个带append按钮的input-group组件 -->
    </div>
    <div class="col-6">
      <!-- 第二个input输入框组件 -->
    </div>
  </div>
  

  两个输入框各占50%的父级宽度，内部按钮渲染只会在自身列容器范围内调整，不会挤压相邻输入框。
• 方法3：禁止输入框被弹性布局压缩
  给input-group下的输入框设置禁用弹性收缩属性，从根源上避免被挤压：
  自定义CSS：

  .input-group > .form-control {
    flex-shrink: 0;
    min-width: 120px; /* 可根据业务需求调整最小宽度数值 */
  }
  

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