Bootstrap4如何使所有input-group-addons保持相同宽度？

当然可以实现！你提到的这个需求很常见，Bootstrap默认的.input-group-prepend是根据内部标签内容自适应宽度的，不过我们只需要添加一点自定义CSS就能让它们统一宽度，既保留前置附加组件的美观性，又能实现整齐的对齐效果。

方法1：固定宽度法（最简单直接） #

给所有.input-group-prepend设置一个固定宽度，同时让内部的标签文本对齐方式保持一致，这样就能让所有前置组件宽度统一。

实现步骤： #

1. 添加自定义CSS样式：

.input-group-prepend {
  width: 160px; /* 你可以根据最长的标签内容调整这个值 */
}

.input-group-prepend .input-group-text {
  width: 100%;
  text-align: left; /* 保持文本左对齐，也可以设为center居中 */
}

2. 修改后的完整HTML代码：

<main class="container-fluid">
  <style>
    .input-group-prepend {
      width: 160px;
    }
    .input-group-prepend .input-group-text {
      width: 100%;
      text-align: left;
    }
  </style>
  <form action="/license.process" name="process" id="process" method="post">
    <div class="input-group mb-2">
      <div class="input-group-prepend">
        <label class="input-group-text" id="licenseEmaillabel"> Email </label>
      </div>
      <input type="text" name="licenseEmail" value="paultaylor@jthink.net" class="form-control" aria-describedby="licenseEmaillabel">
    </div>
    <div class="input-group mb-2">
      <div class="input-group-prepend">
        <label class="input-group-text" id="licenseKey1label"> License Key 1 </label>
      </div>
      <input type="text" name="licenseKey1" value="51302c021440d595c860233f136731865a12cfad2ce2cc2" class="form-control" aria-describedby="licenseKey1label">
    </div>
    <div class="input-group mb-2">
      <div class="input-group-prepend">
        <label class="input-group-text" id="licenseKey2label"> License Key 2 </label>
      </div>
      <input type="text" name="licenseKey2" value="1e50214376557ba3e1dede6c490f33d07b738515c8c2a03" class="form-control" aria-describedby="licenseKey2label">
    </div>
    <h3 class="error" style="visibility:hidden;"> &nbsp; </h3>
    <input type="submit" name="cancel" value="Cancel" class="btn btn-outline-secondary">
    <input type="submit" name="save" value="Save" class="btn btn-outline-secondary">
    <button onclick="j2html.tags.UnescapedText@d352d4f" type="button" class="btn btn-outline-secondary"> Get License </button>
  </form>
</main>

方法2：自适应最长标签宽度（更灵活） #

如果你不想手动设置固定宽度，想让所有前置组件自动匹配最长标签的宽度，可以用CSS Grid来实现：

实现步骤： #

1. 添加自定义CSS：

#process {
  display: grid;
  grid-template-columns: auto 1fr; /* 第一列自适应内容宽度，第二列占满剩余空间 */
  gap: 0.5rem;
}

.input-group {
  grid-column: 1 / -1; /* 让每个input-group占满整行 */
  display: grid;
  grid-template-columns: subgrid; /* 继承父容器的列模板 */
}

.input-group-prepend {
  grid-column: 1;
}

.form-control {
  grid-column: 2;
}

这种方法会自动让所有.input-group-prepend的宽度匹配最长的那个标签，不需要手动调整数值，适合标签内容可能变化的场景。

效果说明 #

两种方法都能让“Email”、“License Key 1”和“License Key 2”的前置组件宽度完全一致，同时保留Bootstrap input-group的美观样式，比常规标签+网格的布局更协调。

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