Bootstrap 垂直对齐不适用于自定义控件[重复]

bwitn5fc 于 2023-06-20 发布在 Bootstrap

关注(0)|答案(1)|浏览(100)

此问题已在此处有答案：

Vertical Align Center in Bootstrap 4 [duplicate]（20个回答）
3年前关闭。
我试图建立一个简单的过滤栏，其中有一个自定义控制元素。
元素应该垂直对齐，但似乎不起作用。这是筛选栏的标记：

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

twitter-bootstrap

来源：https://stackoverflow.com/questions/60966942/vertical-align-not-working-for-custom-control

1条答案

按热度按时间

de90aj5v1#

将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>

赞(0）回复(0）举报 2023-06-20

我来回答

Bootstrap 垂直对齐不适用于自定义控件[重复]

1条答案

相关问题

热门标签

最新问答