Я перехожу с Bootstrap 3 на 4 и пытаюсь понять различия, когда дело доходит до сетки.
https://getbootstrap.com/docs/4.0/layout/grid/
Это говорит:
Благодаря flexbox, столбцы сетки без указанной ширины будут автоматически размещаться как столбцы равной ширины. Например, четыре экземпляра
.col-smбудут автоматически иметь ширину 25% от маленькой точки останова и выше.Классы столбцов показывают количество столбцов, которое вы хотели бы использовать из возможных 12 в строке. Итак, если вам нужно три столбца одинаковой ширины, вы можете использовать
.col-4.
Учитывая это, какая разница между использованием:
.col-sm .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 будет расти одинаково независимо от количества столбцов.
В сетке Bootstrap 3 у нас было 4 точки останова
Очень маленький (для смартфонов .col-xs- *)
Маленький (для планшетов .col-sm- *)
Средний (для ноутбуков .col-md- *)
Большой (для ноутбуков / десктопов .col-lg- *).
В Bootstrap 4 появился новый размер -xl-. Также был удален инфикс -xs-, поэтому самые маленькие столбцы - это просто col-1, col-2 .. col-12 и т. Д.
col- * - 0 (хз)
col-sm- * - 576 пикселей
col-md- * - 768 пикселей
col-lg- * - 992px
col-xl- * - 1200px