Question

我有以下使用Bootstrap的表单。

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

我不确定是什么造成这种情况，因为我的列尺寸加起来不到每个表格行12个，所以他们不应该转移到下一行。任何想法都会很棒。

提前致谢。

普通版面

移位布局（存在验证错误时）

标记

<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

验证DIV可见时，Bootstrap网格会移动

1 个答案: