Question

我正在尝试构建一个具有自定义控件元素的简单过滤器栏。

该元素应垂直对齐，但似乎无法正常工作。这是过滤器栏的标记：

<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-类，该元素都不会移动。如bootstap-docs中所述，已经尝试将display属性设置为inline-block。实现居中之类的唯一方法是添加mt-2类，但这似乎不是应该这样做的正确方法。

Answer 1

将align-items-center添加到form-row，并正确关闭“搜索”按钮上的<i>标签

body{ min-width: 800px;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 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>

垂直对齐不适用于自定义控件

1 个答案: