0
0

Привет! Не могу вникнуть. Допустим есть несколько роу поделённых на colы: col-md-6 и col-md-6, col-md-7 и col-md-5.  Какие колы к ним надо дописать, что бы нормально смотрелось на смартфонах и планшетах? Заранее спасибо.


nikolay klimov
4 years ago






для Bootstrap 4 размеры

Extra small
None(auto)
>=0px
<576px
.col-

Small
sm
>=576px
.col-sm-

Medium
md
>=768px
.col-md-

Large
>=992px
.col-lg-

Extra large
xl
>=1200px
.col-xl-

Для Bootstrap 3 немного отличаются но принцип тот же

Extra small
xs
or None(auto)
>=0px
<768px
.col-xs-

Small
sm
>=768px
.col-sm-

Medium
md
>=992px
.col-md-

Large
>=1200px
.col-lg-

Исходя из размеров подбираешь/меняешь кол-во колонок в зависимости от того какой контент в каждой колонке предполагается, чтобы этот контент помещался и смотрелся нормально. В икнтрументах разработчика можно сужать/расширять экран и смотрет как сайт будет выглядеть при указанных размерах, т.е. на разных устройствах.

Если не понятно - нарисуй на бумаге/в фотошопе макет как будет выглядеть сайт для всех размеров - какую часть ширины экрана будут занимать каждфй блок, при сужении будут ли блоки премещаться друг под друга и будут оставаться также в строку и т.п.

Т.е. изначально нужно понимать что хотим получить, дальше адаптировать в коде.

Кирилл Лавров
4 years ago

Один ответ