Переключение блока div на видимый, почему дизайн ломается?

Question

В laravel 5, jquery 3, "bootstrap 4.4, приложение blade" У меня есть некоторые блоки, невидимые по умолчанию

<div class="form-row m-0 p-0" id="div_checking_step_2_recurring_rent" style="display: none; border: 2px dotted blue;">
    <label for="numeric_step_2_recurring_rent" class="col-12 col-sm-6 col-form-label" style="border: 2px dotted yellow;">Rent</label>
    <div class="col-12 col-sm-6">
        {!! $viewFuncs->text('numeric_step_2_recurring_rent', '', "form-control editable_field", ["maxlength"=>"255",
        "autocomplete"=>"off", "style"=>"border: 2px dotted green;" ] )      !!}
        <input type="text" id="step_2_recurring_rent" name="step_2_recurring_rent" value="0" style="visibility: hidden; width: 1px; height: 1px">
    </div>
</div>

, и они становятся видимыми, только когда пользователь нажимает ckheckbox. То есть выполнено с помощью метода:

bookingsAndAvailability.prototype.is_recurringOnChange = function () {
    var is_recurring= $("#step_2_recurring_is_recurring:checked").val()
    if (is_recurring) {
        $("#div_checking_step_2_recurring_rent").css("display", "block")
    } else {
        $("#div_checking_step_2_recurring_rent").css("display", "none")
    }

}

И проблема в том, что когда метод выше запускается и div_checking_step_2_recurring_rent становится видимым

тогда метка и div внутри div_checking_step_2_recurring_rent находятся не на 1 строке, а div ниже label,

If style="display: none;" 

удаляется из приведенного выше кода, тогда метка и div внутри div_checking_step_2_recurring_rent НАХОДЯТСЯ в 1 строке.

Что я пропустил в методе bookingsAndAvailability.prototype.is_recurringOnChange?

Спасибо!

Answer 1

В bootstrap Я считаю, что по умолчанию это display: flex;, поэтому, когда вы просто удаляете display: none;, он не устанавливается на display: block, он устанавливается на display: flex;. Вот почему он работает, когда вы удаляете этот код.

Когда вы переключаете его с помощью js, вы устанавливаете его на блокировку. Я бы рекомендовал использовать js, чтобы настроить его на гибкость. Вот так:

bookingsAndAvailability.prototype.is_recurringOnChange = function () {
    var is_recurring= $("#step_2_recurring_is_recurring:checked").val()
    if (is_recurring) {
        $("#div_checking_step_2_recurring_rent").css("display", "flex")
    } else {
        $("#div_checking_step_2_recurring_rent").css("display", "none")
    }

}

Надеюсь, это поможет.