css - Bootstrap 输入组对齐问题

Question

在 bootstrap 4 中创建一个输入组，但其中一个按钮似乎没有对齐。

这是我的代码

  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="upload file...">
      <span class="input-group-btn">
        <label class="btn btn-secondary">browse<input name="derfile" type="file" style="display: none;"></label>
        <button class="btn btn-primary" type="submit">Submit</button>
      </span>
    </div>
  </div>

这是我的 fiddle

感谢一些帮助

Answer 1

为了达到预期的结果使用下面

.btn{
  vertical-align:top
}

https://jsfiddle.net/Nagasai_Aytha/0j0gmbjn/3/