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

Question

我正在尝试使用最新版本的 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>

我该如何解决这个问题？

Answer 1

您可以尝试一些事情，也许可以结合起来。 1. 尝试添加到空标签 2. 尝试删除按钮的 .form-group div 容器。 3. 制作您自己的 css class 以作为该按钮的包装器 div 到 space 它正确。像这样

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

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

How to align this asp.net Button with other controls in the form using Bootstrap?

html

css

webforms

bootstrap-4