Как выровнять эту кнопку asp. net с другими элементами управления в форме, используя Bootstrap?

Question

Я пытаюсь обновить стиль своего решения ASP. NET Web Forms, используя последнюю версию Bootstrap. В настоящее время я пытаюсь выровнять элемент управления 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 для кнопки. 3. Создайте свой собственный класс css, который будет использоваться в качестве div-оболочки для этой кнопки, чтобы правильно расположить его. Как то так

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