Bootstrap 4中调整input与select元素宽度占比的方法

要解决这个问题很简单，Bootstrap 4的input-group组件本身基于Flexbox布局，我们可以利用Flex相关的工具类或自定义CSS轻松调整两个元素的宽度分配。

方法一：使用Bootstrap自带的Flex工具类 #

Bootstrap 4提供了现成的flex工具类，无需额外编写CSS就能快速实现需求：

• 给select添加flex-grow-0类：让它不占用额外空间，只保持自身内容所需的宽度
• 给input添加flex-grow-1类：让它占据input-group内剩余的所有可用空间

修改后的代码如下：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <select class="custom-select flex-grow-0" id="inputGroupSelect03">
    <option selected>Choose...</option>
    <option value="1">One</option>
  </select>
  <input class="form-control flex-grow-1">
</div>

方法二：自定义固定宽度比例 #

如果你想给select设置固定的宽度占比（比如20%），可以通过自定义CSS来实现：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  /* 针对input-group内的select设置固定占比 */
  .input-group .custom-select {
    flex: 0 0 20%; /* 不收缩、不扩展，固定占20%宽度 */
  }
  /* 让input占据剩余所有空间 */
  .input-group .form-control {
    flex: 1;
  }
</style>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <select class="custom-select" id="inputGroupSelect03">
    <option selected>Choose...</option>
    <option value="1">One</option>
  </select>
  <input class="form-control">
</div>

原理说明 #

默认情况下，Bootstrap 4会给input-group内的表单元素设置flex: 1 1 auto的样式，这意味着它们会平分可用空间，所以你看到的select和input宽度相等。通过修改flex-grow属性（或直接设置flex值），就能改变它们的空间分配规则。

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