Невозможно получить желаемые результаты с помощью начальной загрузки 4. Нужно знать, что я делаю неправильно?

Question

В сетке начальной загрузки я не могу получить желаемый результат. У меня есть четыре div с классами col-sm-3 и, как правило, все 4 должны отображаться в одной строке, так как это макет с 12 столбцами. Но это не так. Я также приложил скриншоты

Уже пробовал другие контрольные точки, такие как xs и md

<div class="testing container">
        <div class="row">
            <div class="box1 justify-content-center col-xs-3 col-lg-6">BOX 1</div>
            <div class="box2 col-xs-3 col-lg-6">BOX 2</div>
            <div class="box3 col-xs-3 col-lg-6">BOX 3</div>
            <div class="box4 col-xs-3 col-lg-6">BOX 4</div>
        </div>
    </div>

In mobile devices all boxes should be in one line

Answer 1

Не используйте xs в BS4.используйте sm для всего, что меньше 576 пикселей.

<div class="testing container">
        <div class="row">
            <div class="box1 justify-content-center col-3 col-sm-6">BOX 1</div>
            <div class="box2 col-3 col-sm-6">BOX 2</div>
            <div class="box3 col-3 col-sm-6">BOX 3</div>
            <div class="box4 col-3 col-sm-6">BOX 4</div>
        </div>
    </div>

Answer 2

Bootstrap 4 изменил свой класс col-xs, теперь он просто col, а затем размер столбца, который вы хотите, например: col-1 col-2 col-3 Обратите внимание, что col-smm col-md и col-LG по-прежнему работает так же, как в начальной загрузке 3