时间戳

首页 > 解决方案 > bootstrap 5 内联表单对齐问题

css - bootstrap 5 内联表单对齐问题

问题描述

我试图在一个页面上有一个小的内联表单，它有几个用于搜索过滤器的字段和两个用于提交和重置的按钮。如果我在表单域上方，最后的按钮会与表单域不一致。我将如何解决这个问题，使其全部内联在标签下方？

<div class="row g-3 align-text-bottom">
    <form class="row row-cols-md-auto g-3 align-items-center" name="frmRequestSearch" id="frmRequestSearch" method="post" action="#cgi.script_name#">
        <div class="col-sm-7">
            <label class="form-label">ID</label>
            <input type="text" name="cardholder_id" id="id" class="form-control" value="#form.cardholder_id#" placeholder="ID">
        </div>
        <div class="col-sm">
            <label class="form-label">CG</label>
            <select class="form-select" name="cardholder_group" value="#cg#" id="cg">
                <option></option>
                <cfloop query="qryAllGroups">
                    <option value="#displayname#">#displayname#</option>
                </cfloop>
            </select>
        </div>
        <div class="col-sm">
            <button type="submit" name="submit" class="btn btn-secondary">Show Results</button>
        </div>
        <div class="col-sm">
            <a href="/views/requests" class="btn btn-secondary">Reset Parameters</a>
        </div>
    </form>
</div>

标签： csstwitter-bootstrapbootstrap-5

解决方案

只需使用align-items-end...

<form class="row row-cols-md-auto g-3 align-items-end" name="frmRequestSearch" id="frmRequestSearch" method="post" action="#cgi.script_name#">
            <div class="col-sm-7">
                <label class="form-label">ID</label>
                <input type="text" name="cardholder_id" id="id" class="form-control" value="#form.cardholder_id#" placeholder="ID">
            </div>
            <div class="col-sm">
                <label class="form-label">CG</label>
                <select class="form-select" name="cardholder_group" value="#cg#" id="cg">
                    <option></option>
                    <cfloop query="qryAllGroups">
                        <option value="#displayname#">#displayname#</option>
                    </cfloop>
                </select>
            </div>
            <div class="col-sm">
                <button type="submit" name="submit" class="btn btn-secondary">Show Results</button>
            </div>
            <div class="col-sm">
                <a href="/views/requests" class="btn btn-secondary">Reset Parameters</a>
            </div>
</form>

演示

此外，您不希望将 arow直接放在另一个row. 只有列col*应该直接放在row.

推荐阅读