Столбцы размера экрана при начальной загрузке не отображаются правильно

Question

Я создаю страницу с помощью Bootstrap 4 + Asp.Net MVC.Я хочу создать 4 колонки на больших экранах и 2 колонки на средних устройствах.Итак, я создал это:

<div class="form-row">
    <div class="form-group col-lg-3 col-md-6"></div>
    <div class="form-group col-lg-3 col-md-6"></div>
    <div class="form-group col-lg-3 col-md-6"></div>
    <div class="form-group col-lg-3 col-md-6"></div>
</div>

В документации по начальной загрузке 4 сказано, что col-lg- * будет применяться к устройствам размером более 1200 пикселей, а col-md- * - к устройствам размером более 992 пикселей:

Но когда я запускаю сайт, используя Chrome для имитации различных разрешений, в 1024px у меня все еще есть 4 столбца, только при установке 991px я получаю 2 столбца.

ИспользованиеИнструменты разработчика Chrome, я видел это:

Это говорит о том, что col-lg- установлен на минимальную ширину 992px, если она не равна 1200px, как говорится в документации?Я делаю что-то не так?

Answer 1

Надеюсь, это поможет вам.Используйте class row, а не form-row, а если это bootstrap 4+, то вы можете использовать xl class тоже

<div class="row">
    <div class="form-group col-xl-3 col-lg-3 col-md-6"></div>
    <div class="form-group col-xl-3 col-lg-3 col-md-6"></div>
    <div class="form-group col-xl-3 col-lg-3 col-md-6"></div>
    <div class="form-group col-xl-3 col-lg-3 col-md-6"></div>
</div>