如何使用Bootstrap 4调整特定表单元素尺寸以适配对应输入类型？

问题现象 #

搭建包含多个字段的表单时，无法调整各表单元素的尺寸，使其匹配对应的输入类型，实际显示与预期效果对比如下：

原始实现代码 #

<div id="addTaskFieldsDiv">
  <h6>New task</h6>
  <form>
    <div class="row flex-nowrap d-flex align-items-center">
      <div style="width: 30%" class="form-group col-sm"><select class="form-control" id="taskList" placeholder="Pick a task">
          <option>Option1</option>
        </select></div>
      <div style="width: 15%" class="form-group col-sm"><input type="date" class="form-control" placeholder="MM/dd/yyyy"></div>
      <div style="width: 10%" class="form-group col-sm"><input type="link" class="form-control" placeholder="Paste a link"></div>
      <div style="width: 32%" class="form-group col-sm"><input type="text" class="form-control" placeholder="Notes"></div>
      <div style="width: 7%" class="form-group col-sm"><input type="checkbox" title="Request Approval" class="form-control"></div>
      <div style="width: 7%" class="form-group col-sm"><button id="addTask" type="submit" onclick="addTaskToTable()">+</button></div>
    </div>
  </form><br>
</div>

问题原因 #

• 列元素同时使用Bootstrap的col-sm类和内联width样式，col-sm自带的flex宽度计算规则会覆盖自定义宽度，导致设置的百分比宽度不生效
• 复选框套用form-control类会被强制设置为普通输入框的宽高样式，不符合小尺寸复选框的显示预期
• 提交按钮未添加Bootstrap按钮基础类，尺寸无法和其他表单控件对齐
• 输入框使用了无效的type="link"类型，浏览器无法识别为标准链接输入框

修复后代码 #

<div id="addTaskFieldsDiv">
  <h6>New task</h6>
  <form>
    <div class="row flex-nowrap d-flex align-items-center g-2">
      <div style="width: 30%" class="form-group">
        <select class="form-control" id="taskList" placeholder="Pick a task">
          <option>Option1</option>
        </select>
      </div>
      <div style="width: 15%" class="form-group">
        <input type="date" class="form-control" placeholder="MM/dd/yyyy">
      </div>
      <div style="width: 13%" class="form-group">
        <input type="url" class="form-control" placeholder="Paste a link">
      </div>
      <div style="width: 32%" class="form-group">
        <input type="text" class="form-control" placeholder="Notes">
      </div>
      <div style="width: 5%" class="form-group d-flex justify-content-center">
        <input type="checkbox" title="Request Approval" class="form-check-input m-0">
      </div>
      <div style="width: 5%" class="form-group">
        <button id="addTask" type="submit" class="btn btn-primary w-100" onclick="addTaskToTable()">+</button>
      </div>
    </div>
  </form><br>
</div>

调整说明 #

• 移除所有列元素上冲突的col-sm类，让自定义百分比宽度正常生效，同时添加g-2类给列之间加统一间距
• 复选框移除不匹配的form-control类，改用Bootstrap原生的form-check-input类适配复选框尺寸，父容器添加居中类保证复选框垂直水平对齐
• 提交按钮添加btn、btn-primary基础按钮类，设置w-100让按钮撑满父容器宽度，和其他表单控件对齐
• 将无效的type="link"修正为标准的type="url"链接输入类型
• 微调各列宽度占比，总和适配100%宽度，避免内容溢出

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