Сетка Bootstrap 4 — .col-breakpoint против .col-number
Я перехожу с Bootstrap 3 на 4 и пытаюсь понять различия, когда дело доходит до сетки.
https://getbootstrap.com/docs/4.0/layout/grid/
В нем говорится:
Thanks to flexbox, grid columns without a specified width will automatically layout as equal width columns. For example, four instances of
.col-smwill each automatically be 25% wide from the small breakpoint and up.Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use
.col-4.
Учитывая это, в чем будет разница между использованием:
- Четыре экземпляра
.col-sm - Четыре экземпляра
.col-3
Оба они будут занимать 25% ширины .row. Правильный?
Итак, в чем разница между указанием этого в любом случае?
В Bootstrap 3 вы должен был используете определенные числа в сетке из 12 столбцов, например. использование 4 экземпляров .col-sm-3 означало, что у вас будет 4 столбца (ширина 25%), поскольку 12/3 = 4
Ответы 2
В сетке Начальная загрузка 3 у нас было 4 точки останова.
Очень маленький (для смартфонов .col-xs-*)
Маленький (для планшетов .col-sm-*)
Средний (для ноутбуков .col-md-*)
Большой (для ноутбуков/десктопов .col-lg-*).
В Начальная загрузка 4 появился новый размер -xl-. Также был удален инфикс -xs-, поэтому наименьшие столбцы просто col-1, col-2.. col-12 и т. д..
col-* - 0 (xs)
col-sm-* - 576px
col-md-* - 768px
col-lg-* - 992px
col-xl-* - 1200px
"Given this, what would be the difference between using:"
- Four instances of
.col-sm- Four instances of
.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?