Кастомные колонки в bootstrap и верстка по сетке, как сконфигурировать?

Question

[Кирилл Сапронов]

Здравствуйте, возник такой вопрос, я верстаю по psd макету, в photoshop линии сетки настроены так, чтобы появлялись каждые 30px. Нашел приложение для chrome - Design Grid Overlay которое строит сетку. Но у приложения нет такой настройки как "линия каждые 30px", есть настройка количества колонок и gutters внутренние и внешние.
Design Grid Overlay я настроил так: количество колонок: 48 (потому как в psd макете на 1440px получается 48 колонок по 30px) и gutters внутренний: 1. Таким образом получил сетку как в photoshop.
Далее использовал PerfectPixel by WellDoneCode и посмотрел как сетка выглядит на картинке, все отлично, идентично сетке в photoshop.
Далее скомпилировал кастомный bootstrap количество колонок = 48, а grid-gutter-width = 20px,
далее сделал разметку, где решил проверить разные величины колонок в html, но они почему то не совпадают. Пример https://yadi.sk/i/fzplbOjy32GhjQ - оранжевый цвет - колонки сетки, другие цвета это верстка используя колонки bootstrap, красный и зеленый цвет это 1 колонка bootstrap.
html: родитель элемента с классом row - body, ширина row и body 100%.
Подозреваю, что неправильно сконфигурировал кастомный bootstrap, но не могу понять где накосячил, подскажите?

Answer 1

[Кирилл Сапронов]

Как-то я быстро докопался до сути проблемы, забыл указать .container-fluid. Сделал скрин примера: сверху с использованием container-fluid, снизу без. https://yadi.sk/i/5ZkB8Exo32GmYz

Вдруг кому понадобиться, не буду удалять пост.

Answer 2

[Максим Тимофеев]

Если хотите фиксированную ширину, то row должен быть внутри .container и у .container должен быть соответствующий width в пикселях. Вопрос в другом, а кто сегодня делает сайты с фиксированным контейнером? Думаю Вам надо переходить от px к %.

Comments

[Кирилл Сапронов]

Да, вы правы, я делал с container-fluid.

[Максим Тимофеев]

Кирилл Сапронов: все верно, меняйте container-fluid на container и переопределите width, так как стандартные бутстраповские не были рассчитаны на 48 колонок по 30px. Я думаю еще куча проблем у Вас будет с такой сеткой. Надо отказаться от бутстраповской и взять другую. Вот например:
gridpak.com

[Кирилл Сапронов]

Подскажите пожалуйста а чем именно container-fluid может не подойти? Я просто уже попробовал использовать стандартный и все отлично вышло. Не могли бы вы объяснить вот например я решился взять сетку gridpak.com, но как мне ее сконфигурировать под свой проект?

[Максим Тимофеев]

Serj-One: Кто говорил о "без ограничений контейнера"?

Answer 3

[Egor]

А что случилось с gridpak.com ?
Сайт недоступен.
Скиньте, пожалуйста, если у кого осталось в заначках!