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

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

2 голосов
/ 15 мая 2019

Я перехожу с 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 ]

2 голосов
/ 15 мая 2019

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

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

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

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

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

Также смотрите: В чем разница между col-lg- *, col-md- * и col-sm- * вBootstrap

1 голос
/ 15 мая 2019

In Bootstrap 3 Сетка у нас было 4 точки останова

Очень маленький (для смартфонов .col-xs - *)

Маленький (для планшетов .col-sm- *)

Средний (для ноутбуков .col-md - *)

Большой (для ноутбуков / настольных компьютеров .col-lg - *).

В Bootstrap 4 есть новый размер -xl-.Также был удален инфикс -xs-, поэтому самые маленькие столбцы - это просто col-1, col-2 .. col-12 и т. Д.

col- * - 0 (xs)

col-sm- * - 576px

col-md- * - 768px

col-lg- * - 992px

col-xl- * - 1200px

...