如何调整Bootstrap输入组中第一个输入框的宽度？

可行，通过调整CSS规则和优化HTML结构就能实现预期的宽度布局，具体修改方案如下：

问题根源 #

你当前代码里的.phone-code宽度设置被Bootstrap输入组默认的flex布局规则覆盖了，同时mb-2类在横向排列的输入组中属于冗余设置，会产生不必要的垂直间距。

修改后的完整代码 #

CSS样式 #

.phone-code {
  flex: 0 0 auto; /* 固定宽度，不参与flex容器的拉伸分配 */
  width: 80px; /* 可根据实际需求调整这个宽度值 */
}

HTML结构 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="input-group">
  <input type="tel" class="form-control phone-code" value="+971" readonly> <!-- 可选设为只读，避免用户误改国家码 -->
  <input type="tel" class="form-control" id="phone-formatted" placeholder="Enter your phone number">
</div>

关键调整说明 #

• 添加flex: 0 0 auto：强制国家码输入框保持固定宽度，不随父容器的flex布局自动拉伸
• 移除mb-2类：输入组为横向排列，无需垂直外边距
• 可选设置readonly：如果不需要用户修改国家码，添加该属性提升交互合理性

调整后，国家码输入框会维持你设定的固定宽度，手机号输入框则自动填充输入组的剩余空间，达成预期布局效果。

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