如何使用 Bootstrap 将此 asp.net 按钮与表单中的其他控件对齐？答案

【问题标题】：How to align this asp.net Button with other controls in the form using Bootstrap?如何使用 Bootstrap 将此 asp.net 按钮与表单中的其他控件对齐？
【发布时间】：2020-02-07 22:14:47
【问题描述】：

我正在尝试使用最新版本的 Bootstrap 来更新我的 ASP.NET Web 窗体解决方案的样式。我目前正在努力将 ASP.NET Button 控件与水平形式的其他控件对齐，如下面的快照所示：

这是表单的标记：

    <div class="col-lg-12 mb-4">
            <div class="form-row mt-4">
                <div class="col-sm-5 pb-3">
                    <label>County</label>
                    <asp:DropDownList ID="ddlCounty" runat="server"
                        DataSourceID="odsCounty" AppendDataBoundItems="true"
                        DataTextField="Title" DataValueField="Id" CssClass="form-control">
                        <asp:ListItem Value="">-- Select --</asp:ListItem>
                    </asp:DropDownList>
                    <asp:ObjectDataSource ID="odsCounty" runat="server"
                        TypeName="CAS.Business.ContractorBL"
                        DataObjectTypeName="CAS.Data.Models.TCAS_Contractor"
                        SelectMethod="GetContractors"></asp:ObjectDataSource>
                </div>

                <div class="col-sm-4 pb-3">
                    <label>Request Number</label>
                    <asp:TextBox ID="txtRequestNum" runat="server" EnableViewState="true" ViewStateMode="Enabled"
                        CssClass="form-control"></asp:TextBox>
                </div>

                <div class="col-sm-3 pb-3">
                    <label></label>
                    <div class="form-group">
                        <asp:LinkButton ID="lbtnFilter" runat="server" OnClick="lbtnFilter_Click"
                            CssClass="btn btn-primary"> 
                        <i class="fa fa-filter fa-fw" aria-hidden="true"></i>Filter
                        </asp:LinkButton>
                    </div>
                </div>
            </div>
    </div>

我该如何解决这个问题？

【问题讨论】：

标签： html css bootstrap-4 webforms

【解决方案1】：

您可以尝试几种方法，也许可以组合使用。 1. 尝试将添加到空标签 2. 尝试删除按钮的 .form-group div 容器。 3. 制作您自己的 css 类以应用为该按钮的包装 div 适当地间隔它。像这样的

.spacer {
  margin-top: 10px; // trial and error here
}

【讨论】：

非常感谢您在这方面的帮助。