引导输入组对齐问题

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/