Корректно ли контейнеру bootstrap убирать внутренние отступы?

Question

[Senseich]

Вопрос возможно глуповат, но в принципе для чего главному контейнеру бутстрап внутренние отступы 15px?
Вот к примеру мне по заданию нужен блок контента 980px. Делаю контейнер 980px с блоками "col" у которых тоже отступы 15px, ну окей, с помощью row компенсировали -15px, но у контейнера то всё равно остались и того 980-30px = 950px )) Уже не состыковочка. Я конечно могу в своих стилях эти отступы убрать, но я не пойму смысл их изначально делать? И корректно ли их убирать в своих стилях?

Comments

[Сергей delphinpro]

.container +15 > .row -15 > .col +15

Если убрать у контейнера, то очевидно будут ситуации, в которых возникнет горизонтальный скролл из-за выступающих row

[Сергей delphinpro]

Что вам мешает задать ширину контейнера 980 + Gutter-width ?

[Senseich]

Сергей, можно как вариант, про горизонтальный скрол в случае с row я не подумал, но в таком случае же не обязательно делать блок row

[Сергей delphinpro]

Senseich, вот так и начинается говнокодинг. тут необязательно, там не подумал =)))

[Senseich]

Сергей, в чем заключается гавнокодинг? в том, что не будет блока row? можно в любой див другой обернуть, он по сути служит только чтобы компенсировать отступы блоков col.
Хорошо, какое ваше идеальное решение для данного случая? Сделать блок 1010px?

[Сергей delphinpro]

Senseich, Да, следовать принципам построения сетки, заложенной в фреймворк.
$container-lg: 1010px;
(брикпойнт, кстати, тоже подкорректировать придется.)

Конечно я допускаю возможность исключений из правил, если того требует макет. Но у вас, похоже, это просто хотелка. По крайней мере, неясно из имеющихся данных, действительно ли необходимо убирать отступы у контейнера.

[Senseich]

Сергей, возможно я докапываюсь до мелочей, это мне присуще ) но в задании так прописано: Контентная часть лендинга должна быть на ширину 980px

И кстати, что это такое "$" в css? переменные?

[Сергей delphinpro]

Senseich,

Контентная часть лендинга должна быть на ширину 980px

Она и будет такой ширины, если вы зададите контейнеру ширину 1010px

что это такое "$" в css? переменные?

https://github.com/twbs/bootstrap-sass/blob/master...
или https://getbootstrap.com/docs/3.3/customize/#conta...

[Сергей delphinpro]

Senseich, в кастомизаторе, кстати, можете так и написать

[Senseich]

Сергей, Ок, более менее разобрался. Только не пойму, где это задаётся $container-lg. Это в каком то файле scss делается?

[Сергей delphinpro]

Senseich, Да, я же дал ссылку. Либо в _variables.scss (_variables.less), если используете препроцессор, либо в кастомизаторе, ссылку на который я тоже дал.

[Senseich]

Сергей, Ещё вопрос, немного не по теме текущего вопроса. У бутстрапа свои определенные размеры колонок и как содержимое в них подгонять под верстку относительно других элементов?

Вот к примеру я сделал на бутстрапе шапку prntscr.com/ifl0x0 , распихал содержимое на 4 колонки. Но допустим мне надо чтобы надпись из второй колонки была на определенном расстоянии от логотипа по макету? Можно конечно отрицательным маргином, но вроде как не советуют отрицательными значениями пользоваться. И вообще как эти моменты решаются, ведь макет не всегда под бутстрап делается точь в точь?

Answer 1

[Александр Владимирович]

https://getbootstrap.com/docs/4.0/layout/grid/#no-...

Comments

[Senseich]

не совсем понятно, для контейнера тоже можно применять или только для col и row?

[Александр Владимирович]

Senseich, только для row и col, но есть ещё вот что https://getbootstrap.com/docs/4.0/utilities/spacing/
можно применять для всего.

[Senseich]

Александр Владимирович, ок, я так понимаю это работает с Sass

Answer 2

[iBird Rose]

Тк делай ширину контейнера сразу с учетом этих отступов. 980+30=1010.

Смысл их в том, чтобы облегчить выравнивание, когда ты верстаешь несколько колонок. К примеру тебе нужно 3 колонки с отступами 30px между ними. если ты у блоков сделаешь отсупы либо справа, либо слева - то они либо на конце, либо в начале будут не ровные. Поэтому у бутсрапа для этого решение: обертку (row) сделать с отрицательными отступами, а самим колонкам дать отступы с двух сторон. итого у тебя получаются ровные колнки с отступами между ними и при этом в начале и в конце нет лишних отступов.

Comments

[Senseich]

Про row это я знаю ) Я про сам контейнер спрашиваю, я просто пытаюсь следовать техзаданию, я уже думал сделать 1010px. Да конечно так можно, но ширина то всё равно у контейнера 1010px уже как ни крути. Возможно это не критично, но всё же хотелось бы понять зачем эти внутренние отступы, если чисто для эстетики, то ладно

[iBird Rose]

Senseich, тк row тут напрямую связан. бустрап для row задает margin -15px; по твоему куда оно должно уйти если у контейнера не будет этого 15px паддинга?

[Senseich]

iBird Rose, А что мешает уйти за пределы?

Answer 3

[Борис Шпаковский]

Если у устройства будет ширина дисплея скажем 995px, а у вас будут отсутствовать отступы у контейнера, то контент будет очень близко расположен к краям дисплея и отступы в колонках будут шире, чем у основного контейнера, это бросается в глаза и противоречит принципу иерархии в дизайне: отступы у колонок могли бы быть такие же и или меньше, чем у основного блока, но никак не больше.

На самом деле это не критично и влияет только на эстетический вид и касается только планшетов, плюс ко всему я не уверен, что существуют такие нестандартные размеры дисплея. По моему мнению можно смело убирать эти отступы если душа требует))
Пример без отступов на картинке, тут видно что отступы контейнера меньше отступов в колонках:

Comments

[Senseich]

Моя душа этого не требует ) Этого требует задание: ширина основного контента 980px + верстка попиксельная (+/-) 1-2px, вот и получается что на основных мониторах это уже расхождение как минимум в 30px. Про планшеты и другие расширения, я так полагаю в любом случае размеры будут меняться, это логично.