如何在Bootstrap Input Group中让Select标签与剩余区域各占50%宽度

这里提供两种实用方案，都能满足你的需求：

方案一：基于Input Group原生Flex布局调整 #

直接利用Bootstrap的flex和宽度类，在原有Input Group结构上修改：

<div class="input-group">
  <!-- 固定占50%宽度的select -->
  <select class="form-select w-50 flex-shrink-0">
    <option>选择类型</option>
    <option>邮箱</option>
    <option>手机号</option>
  </select>
  
  <!-- 占据剩余50%宽度的输入组件组合 -->
  <div class="flex-grow-1 d-flex">
    <span class="input-group-text">@</span>
    <div class="input-group flex-grow-1">
      <input type="text" class="form-control" placeholder="输入内容">
      <button class="btn btn-outline-secondary" type="button">下拉选项</button>
    </div>
  </div>
</div>

关键类说明：

• w-50：强制select占父容器50%宽度
• flex-shrink-0：防止select在空间不足时被压缩，保证宽度稳定
• flex-grow-1：让右侧输入组件容器自动占满剩余50%空间
• d-flex：确保右侧容器内的元素保持横向排列

方案二：用Bootstrap网格系统拆分布局 #

如果需要更清晰的布局拆分，可以用网格列实现：

<div class="row g-0">
  <div class="col-6">
    <select class="form-select h-100">
      <option>选择类型</option>
      <option>邮箱</option>
      <option>手机号</option>
    </select>
  </div>
  <div class="col-6">
    <div class="input-group h-100">
      <span class="input-group-text">@</span>
      <input type="text" class="form-control" placeholder="输入内容">
      <button class="btn btn-outline-secondary" type="button">下拉选项</button>
    </div>
  </div>
</div>

关键类说明：

• row g-0：移除列之间的默认间距，让两部分无缝衔接
• col-6：每个列固定占50%宽度
• h-100：让select和输入组高度一致，避免视觉错位

两种方案都能完美实现需求，你可以根据自己的结构复杂度选择：方案一更贴合Input Group原生结构，方案二布局拆分更直观。

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