我試圖建立一個簡單的過濾欄，它有一個自定義控件元素。

該元素應該是垂直對齊的，但似乎不起作用。這是過濾欄的標記:

<div class="bg-light p-3 card">
    <form class="form-inline">
        <div class="form-row">
            <div class="col-auto">
                <input type="text" placeholder="The team's name" class="form-control" value="" />
            </div>
            <div class="col-auto">
                <select class="form-control">
                    <option value="">Select the season</option>
                    <option value="2019">2019</option>
                    <option value="2020">2020</option>
                </select>
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-secondary">
                    <i class="fas fa-search"/>&nbsp;Search</button>
            </div>
            <div class="col-auto">
                <div class="custom-control custom-switch align-center">
                    <input type="checkbox" class="custom-control-input" id="vpx" checked="" />
                    <label class="custom-control-label" for="vpx">Hide 0-point teams</label>
                </div>
            </div>
        </div>
    </form>
</div>

但是結果如下圖所示:

無論我添加哪個align- class，元素都不會移動一點。已嘗試將顯示屬性設置為內聯塊，如bootstap-docs中所述。 實現居中的唯一方法是增加mt-2職業，但是這似乎不是正確的方法。

將align-items-center添加到form-row并關閉& lt我& gt在搜索按鈕上正確標記

body{ min-width: 800px;}

<link  rel="stylesheet"/>
<div class="bg-light p-3 card">
    <form class="form-inline">
        <div class="form-row align-items-center">
            <div class="col-auto">
                <input type="text" placeholder="The team's name" class="form-control" value="" />
            </div>
            <div class="col-auto">
                <select class="form-control">
                    <option value="">Select the season</option>
                    <option value="2019">2019</option>
                    <option value="2020">2020</option>
                </select>
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-secondary">
                    <i class="fas fa-search">&nbsp;Search</i></button>
            </div>
            <div class="col-auto">
                <div class="custom-control custom-switch align-center">
                    <input type="checkbox" class="custom-control-input" id="vpx" checked="" />
                    <label class="custom-control-label" for="vpx">Hide 0-point teams</label>
                </div>
            </div>
        </div>
    </form>
</div>