Bootstrap 3迁移至Bootstrap 4：文件上传按钮与输入框尺寸不匹配问题

嘿，我太懂你迁移时遇到的这个糟心问题了！Bootstrap3到4的输入组组件改了不少东西，原来的input-group-btn类直接被砍掉了，这就是导致按钮和输入框不对齐的核心原因。我给你调整一下代码，保证完美适配Bootstrap4：

问题根源 #

Bootstrap4废弃了input-group-btn，改用input-group-prepend（按钮在输入框左侧）或input-group-append（按钮在输入框右侧）来包裹按钮元素，同时文件输入的默认样式处理也有变化，得用隐藏类把原生文件框藏起来，靠按钮触发它。

修正后的完整代码 #

<!-- 记得替换为Bootstrap4的CSS文件 -->
<div class="row">
  <div class="col-md-10">
    <div class="input-group">
      <div class="input-group-prepend">
        <label class="btn btn-primary" for="pdf-file">
          Choose File
        </label>
      </div>
      <input type="text" class="form-control" readonly placeholder="No file chosen">
      <input type="file" id="pdf-file" class="d-none">
    </div>
  </div>
</div>

额外说明 #

• 我加了个readonly的文本框来模拟原生文件选择后的文件名显示，你可以用JavaScript监听文件选择事件，把选中的文件名填到这个文本框里
• 如果想把按钮放在输入框右边，把input-group-prepend换成input-group-append就行
• d-none类是Bootstrap4的隐藏类，用来把原生的文件输入框藏起来，避免它破坏布局
• 确保你的输入框用了form-control类，Bootstrap4里这个类的高度和按钮是严格对齐的

这样调整后，按钮和输入框的尺寸就完全匹配啦！

内容的提问来源于stack exchange，提问作者Vishnu Y S