css - Bootstrap 网格在验证 DIV 可见时移动

Question

我有以下使用 Bootstrap 的表单。

一切似乎都运行良好，直到某些字段出现验证错误。当发生这种情况时，我使反馈 DIV 可见，这会改变网格对齐方式。

我不确定是什么原因造成的，因为我的列大小加起来不到每个表单行的 12 个，所以它们不应该转移到下一行。任何想法都会很棒。

提前致谢。

正常布局

Shifted Layout(出现验证错误时)

标记

<div class="account-options account-options-banking-details row" id="divBankingDetails" runat="server">
    <hr />
    <h1>Banking Details</h1>
    <div class="account-options-banking-controls col-xs-10">
        <div class="form-row">
            <div class="form-group col-xs-5">
                <label for="txtBankName">Bank Name</label>
                <input type="text" class="form-control inputfield" id="txtBankName" runat="server">
                <div class="invalid-feedback" id="divBankNameFeedback" runat="server" visible="false">
                    Required
                </div>
            </div>
            <div class="form-group col-xs-5">
                <label for="txtAccountType">Account Type</label>
                <select class="form-control inputfield custom-select" ID="cboAccountType" runat="server">
                    <option Value="0">Choose...</option>
                    <option Value="1">Checking</option>
                    <option Value="2">Savings</option>
                </select>
                <div class="invalid-feedback" id="divAccountTypeFeedback" runat="server" visible="false">
                    Required
                </div>
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-xs-5">
                <label for="txtBankAccountNumber">Bank Account Number</label>
                <input class="form-control inputfield acct-number" name="BankAccountNumber" id="txtBankAccountNumber" runat="server">
                <span toggle=".acct-number" class="fa fa-fw fa-eye field-icon toggle-account-number"></span>
                <div class="invalid-feedback" id="divBankAccountNumberFeedback" runat="server" visible="false">
                    Required
                </div>
            </div>
            <div class="form-group col-xs-5">
                <label for="txtReenterBankAccountNumber">Re-enter Bank Account Number</label>
                <input type="text" class="form-control inputfield" id="txtReenterBankAccountNumber" runat="server">
                <div class="invalid-feedback" id="divReenterBankAccountNumberFeedback" runat="server" visible="false">
                    Required
                </div>
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-xs-5">
                <label for="txtRoutingNumber">Routing Number</label>
                <input type="text" class="form-control inputfield" id="txtRoutingNumber" runat="server">
                <div class="invalid-feedback" id="divRoutingNumberFeedback" runat="server" visible="false">
                    Required
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

您应该使用 .row 而不是 .form-row。 .form-row 适用于 Bootstrap 4