Как сделать блок на всю ширину на мобильном разрешении, при использовании сетки bootsrap?

Question

[JasonStepler]

Добрый день.
Как, используя сетку бутстрапа, сделать контейнер на всю ширину на мобильных устройствах?
Например есть такой блок https://jsfiddle.net/87e05rmb/ и нужно расположить на всю ширину экрана, без отступов по краям.
На ум приходит мысль только обнулять padding у контейнера, колонок и margin у row.
Может быть есть более красивый способ, чем переопределение стилей?

Comments

[Сергей delphinpro]

https://jsfiddle.net/87e05rmb/1/

Answer 1

[Павел]

Есть же класс для этого
container-fluid

getbootstrap.com/css/#grid-example-fluid

Answer 2

[iBird Rose]

ты хочешь сделать свой div, который не будет придерживаться bootsrap сетки. ну тк сделай его. не используй ни container, ни row, ни col для этого блока. и ты получишь блок на 100% шириной без паддингов.

Answer 3

[Василий]

.container даёт боковые паддинги 15px, .row - боковые маргины -15px,в итоге получается 0px. А .col-lg добавляет ещё 15px, вот и получается отступ. Получается нужно либо убрать его, либо в него ещё добавить .row

Answer 4

[Alexander Litvinenko]

Это не сетки, это тебе .fluid-container вместо обычного и на "только на моб" оно не делается.
Зато можешь сетку вложиться внутрь такого fluid-container сделать и создать отступы на большом экране.

Answer 5

[Frank2205]

col-xs-12