Столбцы начальной загрузки не работают должным образом

Question

Я пытаюсь создать 12 столбцов, каждый из которых будет занимать 1 столбец на большом экране и 4 столбца на маленьком экране. Но когда я пытаюсь свести это к минимуму, ничего не происходит, они просто толкаются один под другим. Я хотел разместить 3 колонки в одном ряду на маленьких экранах, но этого не произошло, и мне интересно, что я здесь делаю неправильно. Можете ли вы помочь мне без добавления негативной репутации к сообщению? Спасибо!

Вот код:

<div class="container">
  <div class="row">
    <div class="col-lg-1 col-xs-4 bg-warning">Warning</div>
    <div class="col-lg-1 col-xs-4 bg-info">Info</div>
    <div class="col-lg-1 col-xs-4 bg-danger">Cancel</div>
    <div class="col-lg-1 col-xs-4 bg-success">Yes</div>
    <div class="col-lg-1 col-xs-4 bg-warning">Warning</div>
    <div class="col-lg-1 col-xs-4 bg-info">Info</div>
    <div class="col-lg-1 col-xs-4 bg-danger">Cancel</div>
    <div class="col-lg-1 col-xs-4 bg-success">Yes</div>
    <div class="col-lg-1 col-xs-4 bg-warning">Warning</div>
    <div class="col-lg-1 col-xs-4 bg-info">Info</div>
    <div class="col-lg-1 col-xs-4 bg-danger">Cancel</div>
    <div class="col-lg-1 col-xs-4 bg-success">Yes</div>
  </div>
</div>

Answer 1

col-xs - недоступно в начальной загрузке 4.

Для «xs» необходимо использовать только «col». Как: col-4;

Чтобы узнать больше, взгляните на начальную загрузку Документация .

Answer 2

Насколько я знаю, в начальной загрузке 4 отсутствует "col-xs-", поэтому для маленького экрана используйте "col-"

.col-sm for larger mobile phones (devices with resolutions ≥ 576px);
.col-md for tablets (≥768px);
.col-lg for laptops (≥992px);
.col-xl for desktops (≥1200px)