如何使用Bootstrap将两个带图标前缀的输入框置于并排列中？

哈哈，我太懂这种踩Bootstrap组件样式坑的感觉了！你直接给input-group-addon加col-sm-6没效果，包裹元素也不管用，核心原因是input-group内部有自己的布局逻辑——它的子元素是通过flex或浮动控制的，直接加网格列类会被组件的默认样式冲掉。

给你两个靠谱的解决办法，按需选择：

方法一：自定义CSS快速解决 #

给你的附加元素加个自定义类，比如half-addon，然后写几行CSS：

.half-addon {
  flex: 0 0 50% !important; /* 直接占满50%宽度，对应col-sm-6的比例 */
  max-width: 50% !important;
  text-align: left; /* 按需调整文本对齐方式 */
}

把这个类套到input-group-addon上，立马就能让它变成半宽。

方法二：按Bootstrap规则重构结构（更规范） #

如果不想用!important破坏样式优先级，那就把结构拆成两个独立的input-group，分别塞进col-sm-6容器里：

<div class="row">
  <div class="col-sm-6">
    <div class="input-group">
      <span class="input-group-addon">你的附加文本</span>
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="col-sm-6">
    <div class="input-group">
      <span class="input-group-addon">另一个附加文本</span>
      <input type="text" class="form-control">
    </div>
  </div>
</div>

这种方式完全贴合Bootstrap的网格系统，不会有样式冲突，后续维护也更省心。

亲测这两种方法都能实现你想要的半宽附加元素效果，选哪个看你需求啦~

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