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

Я перехожу с Bootstrap 3 на 4 и пытаюсь понять различия, когда дело доходит до сетки.

https://getbootstrap.com/docs/4.0/layout/grid/

Это говорит:

  • Благодаря flexbox, столбцы сетки без указанной ширины будут автоматически размещаться как столбцы равной ширины. Например, четыре экземпляра .col-sm будут автоматически иметь ширину 25% от маленькой точки останова и выше.

  • Классы столбцов показывают количество столбцов, которое вы хотели бы использовать из возможных 12 в строке. Итак, если вам нужно три столбца одинаковой ширины, вы можете использовать .col-4 .

Учитывая это, какая разница между использованием:

  1. Четыре экземпляра .col-sm
  2. Четыре экземпляра .col-3

Оба из них занимают 25% ширины .row . Правильный?

Так в чем же разница между указанием этого в любом случае?

В Bootstrap 3 вы должны были использовать конкретные числа в сетке из 12 столбцов, например, использование 4 экземпляров .col-sm-3 означало, что у вас будет 4 столбца (ширина 25%), поскольку 12/3 = 4

Всего 2 ответа


«Учитывая это, какая разница между использованием:»

  • Четыре экземпляра .col-sm
  • Четыре экземпляра .col-3

Да, в некоторых случаях они выглядят одинаково, но col-3 никогда не будет располагаться вертикально, поскольку он применяется к наименьшей (xs) точке останова. Однако col-md будет располагаться вертикально на средней точке прерывания менее 768 пикселей.

https://www.codeply.com/go/xi74w61tdk

За пределами вашего варианта использования с использованием 4 столбцов столбец col-3 всегда будет иметь ширину 25%. col-md будет расти одинаково независимо от количества столбцов.


Также смотрите: В



Есть идеи?

10000