如何通过Bootstrap@5.3的form-control/input-group设置input宽度（关联maxlength）

Bootstrap 5.3的form-control和input-group组件本身没有内置功能直接让input宽度和maxlength属性关联，但可以通过两种简单方式实现需求：

方案1：纯CSS实现（推荐） #

利用CSS属性选择器和自定义属性，根据maxlength值动态计算input宽度，同时覆盖input-group内form-control的默认flex行为，避免被拉伸：

/* 基础样式：禁止input在input-group中自动拉伸，设置单字符基准宽度（可根据字体调整） */
.input-group .form-control[maxlength] {
  flex: none;
  width: calc(1.1em * var(--max-length));
}

/* 为不同maxlength的input绑定对应数值 */
.input-group .form-control[maxlength="5"] { --max-length: 5; }
.input-group .form-control[maxlength="8"] { --max-length: 8; }
.input-group .form-control[maxlength="11"] { --max-length: 11; }
.input-group .form-control[maxlength="15"] { --max-length: 15; }

修改后的完整HTML示例：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
.input-group .form-control[maxlength] {
  flex: none;
  width: calc(1.1em * var(--max-length));
}
.input-group .form-control[maxlength="5"] { --max-length: 5; }
.input-group .form-control[maxlength="8"] { --max-length: 8; }
.input-group .form-control[maxlength="11"] { --max-length: 11; }
.input-group .form-control[maxlength="15"] { --max-length: 15; }
</style>
<div>
  <label for="mygroup" class="form-label">Numbers</label>
  <div class="input-group has-validation mb-2" id="mygroup">
    <input type="text" class="form-control" maxlength="11" pattern="^\d{1,11}$" required placeholder="Number" />
    <input type="text" class="form-control" minlength="7" maxlength="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" placeholder="IP" required />
    <input type="text" class="form-control" maxlength="5" min="1" max="65535" required />
    <input type="text" class="form-control" maxlength="8" min="1" max="16777215" required />
    <input type="text" class="form-control" maxlength="5" min="1" max="65535" required />
    <button class="btn btn-outline-secondary" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-plus-fill" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511zM12.5 1a.5.5 0 0 1 .5.5V3h1.5a.5.5 0 0 1 0 1H13v1.5a.5.5 0 0 1-1 0V4h-1.5a.5.5 0 0 1 0-1H12V1.5a.5.5 0 0 1 .5-.5z"/></svg></button>
    <div class="invalid-feedback">Enter valid number</div>
  </div>
</div>

方案2：JavaScript动态设置宽度 #

如果需要更灵活的控制（比如兼容旧浏览器、实时调整），可以用JS遍历input，根据maxlength计算宽度：

document.querySelectorAll('.input-group .form-control[maxlength]').forEach(input => {
  const maxLength = parseInt(input.getAttribute('maxlength'));
  // 按每个字符1.1em宽度计算，可根据实际字体调整
  input.style.width = `${maxLength * 1.1}em`;
  input.style.flex = 'none';
});

注意事项 #

• 1.1em是单字符基准宽度，等宽字体可设为1em以获得更精确的匹配，非等宽字体需要根据实际显示效果微调。
• 必须设置flex: none，否则input-group的flex布局会强制拉伸input，覆盖自定义宽度。

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