Bootstrap中Select与Input字段尺寸不一致的适配方案咨询

问题根源分析 #

你遇到的核心问题有两个：

1. Bootstrap版本冲突：页面同时引入了Bootstrap 4和Bootstrap 3，两个版本的form-control样式规则相互覆盖，导致Select元素的高度被异常重置。你看到的calc(2.25rem + 2px)是Bootstrap 4的默认Select高度，但因为和Bootstrap 3的样式冲突，才出现和Input尺寸不匹配的情况。
2. 自定义CSS语法错误：多个<style>标签里存在未闭合的大括号、多余分号等语法问题，会干扰浏览器对样式的正常解析。

分步解决方案 #

1. 移除重复的Bootstrap版本 #

保留Bootstrap 4的引入即可（你的布局使用了Bootstrap 4的栅格类如col-lg-6、offset-lg-3），删除Bootstrap 3的链接：

<!-- 删除这行重复的Bootstrap 3引入 -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

2. 修复自定义CSS的语法错误 #

将分散的<style>标签合并，并修正语法问题：

<style>
/* 表单验证状态边框 */
.was-validated .form-control:invalid,
.was-validated .form-control:valid {
    border-color: #000000;
}

/* 输入框占位符样式 */
.form-control::-webkit-input-placeholder {
    color: #008752 !important;
    font-family: 'Montserrat' !important;
}

/* 其他自定义样式 */
.checkbox, .p1, .h4 {
    color: #008752 !important;
    font-family: 'Montserrat';
}
</style>

3. 确保Select与Input尺寸一致 #

完成前两步后，Bootstrap 4默认的form-control类已经能让单选择的<select>和<input>保持一致的高度。如果仍有异常，可以添加以下自定义规则强化（使用相对单位保证自适应）：

/* 统一非多行、非多选择的Select与Input高度 */
select.form-control:not([size]):not([multiple]) {
    height: inherit;
    padding: .375rem .75rem; /* 和Bootstrap 4 Input的内边距一致 */
    line-height: 1.5;
}

修改后的完整头部代码示例 #

<head>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title></title>
   <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
   <style>
      /* 表单验证状态边框 */
      .was-validated .form-control:invalid,
      .was-validated .form-control:valid {
          border-color: #000000;
      }

      /* 输入框占位符样式 */
      .form-control::-webkit-input-placeholder {
          color: #008752 !important;
          font-family: 'Montserrat' !important;
      }

      /* 其他自定义样式 */
      .checkbox, .p1, .h4 {
          color: #008752 !important;
          font-family: 'Montserrat';
      }
   </style>
</head>

这样处理后，你的Select元素就能和Input保持一致的尺寸，同时基于Bootstrap的相对单位（rem、em），能在不同设备和浏览器上自适应渲染。

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