Не могу понять какая должна быть сетка в макете, общая ширина контейнера 1110, 1140, 1170? везде по разному пишут.
И вот нашел еще такую информацию, что думаете по этому?
"Дело в том, что при верстке Bootstrap задает ширину колонок в процентах. При 12 колонок, одна колонка будет 8,3333333333%. А дизайн мы создаем в пикселях, и обычно ширина колонки берется 67-68 px.
Сетку Bootsrap в 1140 px в дизайне не получится создать. Фиксированные значения у Bootstrap задаются только для отступов(отступ между колонками 30 px)
Таким образом получается следующее:
Если брать ширину колонки 67 px и расстояние между колонками 30 px — (30*11)+(67*12) = 1134
Если брать ширину колонки 68 px и расстояние между колонками 30 px — (30*11)+(68*12) = 1146
Можно конечно сделать ширину колонки 67,5 px, тогда будет так — (30*11)+(67,5*12) = 1140, но тогда получаем не целые значения ширины колонок, что считается плохо в дизайне интерфейсов."
Если говорить о стандартных значениях бутстрапа, то там такие размеры:
Полная ширина колонки — 100 пикс. 100*12=1200
Ширина колонок без гуттеров — 70 пикс + 30 пикс гуттер (по 15 пикс с каждой стороны): 70*12+30*12=1200.
Полезная ширина сайта — 70*12+30*11=1170 (+ по 15 пикс с каждой стороны неиспользуемые для размещения контента гуттеры).
Сергей delphinpro, Зашел на сайт bootstrap и посмотрел сетку 4 версии. И написано следующее, Extra large
≥1200px и Максимальная
ширина контейнера: 1140px. почему тогда 1200? если вроде как 1170px. Но если 1170px получается нельзя нормально разделить колонки по ширине. Если смотреть на мое сообщение про "Если брать ширину колонки 67 px и расстояние между колонками 30 px — (30*11)+(67*12) = 1134
Если брать ширину колонки 68 px и расстояние между колонками 30 px — (30*11)+(68*12) = 1146"
В общем поискал еще информации, разобрался и итог такой. Ширина колонки 65px и отступ с каждой стороны по 15px итого (15+65+15)*12 = 1140px максимальная ширина контейнера по умолчанию для desktop в Bootstrap 4, по факту 1110px это зона для контента в макете. В 3-й версии было 1170px общая ширина контейнера.
Суть в том, что при верстке в bootstrap по умолчанию в css свойствах прописано «box-sizing: border-box». Это свойство - «Применяется для изменения алгоритма расчета ширины и высоты элемента. Согласно спецификации CSS ширина блока складывается из ширины контента (width), значений отступов (margin), полей (padding) и границ (border). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.»
К примеру у нас есть блок с width: 600px, padding: 20px и еще (обводка) border: 2px в итоге ширина этого блока пересчитается и станет 644px, а со свойством box-sizing: border-box она останется 600px, но при этом внутренний контент будет подстраиваться с увеличением padding'a например.
Собственно в чем заключается решение? Учесть то что общий контейнер будет 1200px (1170px – контент + 15px отступы справа и слева.
Средний
Средний
