如何使Input Group左侧标签宽度统一并保持文本左对齐？

嘿，我来帮你搞定这个小问题！你用的是Bootstrap的input-group组件对吧？要让所有左侧标签宽度一致且文本左对齐，只需要加几行自定义CSS就能轻松实现，完全不破坏原有组件的样式。

核心解决方案 #

直接给左侧的.input-group-text设置固定宽度和左对齐样式就行：

/* 统一左侧标签宽度 + 左对齐文本 */
.input-group .input-group-prepend .input-group-text {
    width: 160px; /* 你可以根据最长标签的长度调整这个数值 */
    text-align: left;
}

代码解释 #

• width: 160px：给所有左侧标签设置固定宽度，这样不管标签文本长短，宽度都保持一致。你可以自己测试一下，把数值调到刚好能放下最长的标签文本就行。
• text-align: left：Bootstrap默认的.input-group-text是居中对齐的，加上这个属性就能让标签文本靠左显示，符合你的需求。

响应式适配（可选） #

如果需要适配不同屏幕尺寸，比如小屏幕上缩小标签宽度，可以用媒体查询或者弹性宽度：

/* 响应式版本：小屏幕缩小标签宽度 */
.input-group .input-group-prepend .input-group-text {
    min-width: 120px;
    max-width: 200px;
    width: 30%; /* 占父容器的百分比，根据布局调整 */
    text-align: left;
}

完整示例代码 #

你可以直接复制这段代码测试效果：

<div class="container mt-4">
  <!-- 短标签 -->
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">姓名</span>
    </div>
    <input type="text" class="form-control" placeholder="请输入姓名">
  </div>
  
  <!-- 长标签 -->
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">hdsfkjdhf（测试长标签）</span>
    </div>
    <input type="text" class="form-control" placeholder="请输入内容">
  </div>
  
  <!-- 中等长度标签 -->
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">联系电话</span>
    </div>
    <input type="text" class="form-control" placeholder="请输入手机号">
  </div>
</div>

<style>
.input-group .input-group-prepend .input-group-text {
    width: 180px;
    text-align: left;
}
</style>

进阶：用Bootstrap变量定制（可选） #

如果你的项目用了Sass来编译Bootstrap，可以直接修改内置变量$input-group-addon-width，这样所有input-group的标签都会自动继承这个宽度，不用写自定义CSS：

$input-group-addon-width: 160px;
@import "bootstrap";

这样更符合Bootstrap的定制规范，但如果只是快速解决问题，前面的自定义CSS方法更直接~

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