Bootstrap 4中如何为input-group内的两个输入框设置不同宽度？

嘿，我完全懂你碰到的这个麻烦——想在form-group的col-12容器里放两个带前置/后置元素的input-group，既要让它们并排，又要各自指定宽度，结果用嵌套col的方式居然变成上下排列了对吧？别着急，这儿有几个靠谱的解决方案：

方案1：用Flexbox直接控制宽度 #

Bootstrap 4本身基于Flexbox，所以我们可以给外层容器加上d-flex类让子元素横向排列，再通过max-width或者width来给每个input-group设定宽度：

<div class="form-group">
  <div class="col-12 d-flex">
    <!-- 第一个带prepend的输入框，占40%宽度 -->
    <div class="input-group flex-fill mr-2" style="max-width: 40%;">
      <div class="input-group-prepend">
        <span class="input-group-text">@</span>
      </div>
      <input type="text" class="form-control" placeholder="用户名">
    </div>

    <!-- 第二个带append的输入框，占60%宽度 -->
    <div class="input-group flex-fill" style="max-width: 60%;">
      <input type="text" class="form-control" placeholder="邮箱">
      <div class="input-group-append">
        <span class="input-group-text">@example.com</span>
      </div>
    </div>
  </div>
</div>

• d-flex：让col-12的子元素横向排列，避免换行
• flex-fill：确保每个input-group能填充可用空间，同时配合宽度限制来分配比例
• mr-2：给第一个输入框加一点右边距，避免两个元素挤在一起

方案2：自定义CSS类控制宽度 #

如果需要复用这个宽度设置，不如自定义两个CSS类，这样代码更整洁：

/* 自定义输入框宽度类 */
.input-group-w-40 {
  width: 40%;
  margin-right: 1rem;
}
.input-group-w-60 {
  width: 60%;
}

然后在HTML里使用：

<div class="form-group">
  <div class="col-12 d-flex">
    <div class="input-group input-group-w-40">
      <div class="input-group-prepend">
        <span class="input-group-text">@</span>
      </div>
      <input type="text" class="form-control" placeholder="用户名">
    </div>
    <div class="input-group input-group-w-60">
      <input type="text" class="form-control" placeholder="邮箱">
      <div class="input-group-append">
        <span class="input-group-text">@example.com</span>
      </div>
    </div>
  </div>
</div>

这种方式适合需要多次使用相同宽度比例的场景，维护起来更方便。

方案3：用Bootstrap网格系统嵌套Row和Col #

其实你提到的嵌套col方法是可行的，只是可能之前的结构没写对。我们可以在col-12里嵌套一个row，然后用col-*来分配宽度，这样也能实现并排效果：

<div class="form-group">
  <div class="col-12">
    <div class="row no-gutters">
      <!-- 第一个输入框占4列宽度 -->
      <div class="col-4 pr-2">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text">@</span>
          </div>
          <input type="text" class="form-control" placeholder="用户名">
        </div>
      </div>
      <!-- 第二个输入框占8列宽度 -->
      <div class="col-8">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="邮箱">
          <div class="input-group-append">
            <span class="input-group-text">@example.com</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

• no-gutters：去掉row默认的负边距，避免元素溢出
• pr-2：给第一个col加右边距，让两个输入框之间有间隔
• 用col-4和col-8来精确控制宽度比例，完全贴合Bootstrap的网格系统

这三个方案都能解决你的问题，你可以根据自己的需求选一个最顺手的~

内容的提问来源于stack exchange，提问作者Ondřej Javorský