如何使用Bootstrap 4实现行内表单字段均匀分布？

我一直尝试调整表单字段布局以实现更均匀的分布效果，但始终未能成功。

效果对比 #

• 当前效果
  
• 预期效果
  

当前代码 #

<div class="row flex-nowrap d-flex align-items-center">
  <div style="width: 37%" class="form-group col-sm col-md-3"><select class="form-control" id="taskList" placeholder="Pick a task">
      <option value=""></option>
      <option value="review and approve on page recommendations">Review and approve</option>
      <option value="review and approve technical seo recommendations">Review</option>
    </select></div>
  <div style="width: 15%" class="form-group col-sm col-md-2"><input type="date" class="form-control" placeholder="MM/dd/yyyy"></div>
  <div style="width: 10%" class="form-group col-sm col-md-2"><input type="link" class="form-control" placeholder="Paste a link"></div>
  <div style="width: 32%" class="form-group col-sm col-md-3"><input type="text" class="form-control" placeholder="Notes"></div>
  <div style="width: 7%" class="form-group col-sm col-md-1"><button id="addTask" type="submit" onclick="addTaskToDb()">+</button></div>
</div>

诉求：调整上述代码，实现表单字段均匀分布的预期布局效果。

问题原因 #

布局失效的核心是样式冲突：

• 同时给表单项父元素设置了Bootstrap栅格类和手动写的内联width百分比样式，两者规则互相覆盖
• 手动设置的宽度总和为37%+15%+10%+32%+7%=101%，本身已经超出容器宽度，再叠加栅格默认的内边距、元素间距，必然会出现挤压、分布不均的问题
• 提交按钮没有适配表单控件样式，尺寸和其他输入框不统一

修复步骤 #

1. 删除所有表单项上手动添加的内联width样式，完全用Bootstrap栅格规则控制宽度
2. 按12栅格规则分配宽度：任务下拉框占4份、日期输入框占2份、链接输入框占2份、备注输入框占3份、提交按钮占1份，总和刚好12，不会溢出
3. 父容器用Bootstrap自带的g-2类控制表单项间距，不用手动写边距
4. 给按钮添加form-control、w-100类，让它和其他输入框高度、宽度对齐

修复后完整代码 #

<div class="row flex-nowrap d-flex align-items-center g-2">
  <div class="form-group col-4">
    <select class="form-control" id="taskList" placeholder="Pick a task">
      <option value=""></option>
      <option value="review and approve on page recommendations">Review and approve</option>
      <option value="review and approve technical seo recommendations">Review</option>
    </select>
  </div>
  <div class="form-group col-2">
    <input type="date" class="form-control" placeholder="MM/dd/yyyy">
  </div>
  <div class="form-group col-2">
    <input type="url" class="form-control" placeholder="Paste a link">
  </div>
  <div class="form-group col-3">
    <input type="text" class="form-control" placeholder="Notes">
  </div>
  <div class="form-group col-1">
    <button id="addTask" type="submit" class="form-control btn btn-primary w-100" onclick="addTaskToDb()">+</button>
  </div>
</div>

补充说明 #

• 栅格类统一使用col-*而非col-sm/col-md-*，是为了匹配flex-nowrap的不换行需求，在所有屏幕尺寸下都保持固定宽度比例，不会出现换行、挤压变形
• 原代码中type="link"不是input的合法type值，已替换为标准的type="url"，会自带链接格式校验能力
• 按钮添加的btn btn-primary是Bootstrap标准按钮样式，可根据自身需求替换为其他按钮风格类

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