Bootstrap Grid сдвигается, когда видимость DIV видна - PullRequest
Новая
       6

Bootstrap Grid сдвигается, когда видимость DIV видна

0 голосов
/ 01 июня 2018

У меня есть форма ниже, которая использует Bootstrap.

Кажется, все работает нормально, пока в некоторых полях не появятся ошибки проверки.Когда это происходит, я делаю DIV обратной связи видимыми, что смещает выравнивание сетки.

Я не уверен, что является причиной этого, поскольку размеры моего столбца составляют менее 12 для каждой строки формы, поэтому они не должны переходить к следующей строке.Любые идеи будут великолепны.

Заранее спасибо.

Нормальный макет enter image description here

Сдвиг макета (при наличииошибки проверки) enter image description here

Разметка 

<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>

1 Ответ

0 голосов
/ 01 июня 2018

Вы должны использовать .row вместо .form-row..form-row для Bootstrap 4

...