Зачем объединять col и col-lg-x при использовании сеток в bootstrap?

Question

Я новичок в bootstrap. На официальном сайте я увидел пример:

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Мой вопрос: почему нужно включить col в col-lg-2 (строка <div class="col col-lg-2">)? Я думал, что col само по себе означает, что это автоматически равная ширина, но здесь мы указываем 2 из 12 единиц размера, разве это не переопределит автоматическую ширину в любом случае?

Answer 1

Как указано в официальной документации, col без нумерованного класса используется для автоматического изменения размера ваших столбцов. С col-lg-2 вы говорите Bootstrap, что на больших экранах и т. Д. Его ширина должна составлять всего 2 столбца. Вы также можете установить ширину столбцов автоматически, включая один столбец ширины, как в примере выше. Подробнее об этом здесь .

Подробнее об этом можно прочитать на официальном сайте .