将按钮与文本输入对齐并选择标签bootstrap4

Question

我无法使我的按钮与选择标签对齐，底部有一些我无法移除的空间。 as you can see in this picture

这是我的代码：

<form>
    <div class="row ">
        <div class="col mt-4">
          <input type="text" name="">
        </div>
        <div class="col mt-4">
          <select></select>
        </div>
        <div class="col mt-4">
          <select></select>
        </div>

        <div class="col mt-4">
            <input type="submit" name="" value="Search" id="" class="btn btn-danger" style="border-radius: 5%;">
        </div>
    </div>
</form>

Answer 1

使用bootstrap，您可以将项目与flex

对齐

试试这个

<div class="col mt-4 align-self-center">
        <input type="submit" name="" value="Search" id="" class="btn btn-danger" style="border-radius: 5%;">
    </div>

这会将输入置于列中心。按钮的高度取决于其填充和使用的字体大小。