Нужна помощь с сеткой bootstrap

[typus]

Приветствую,
нужна помощь с несколько нестандартной бутстраповской версткой.
Речь вот о чем - есть шаблон под magento, Для просмотра ссылки Войди или Зарегистрируйся
В описании к этому Для просмотра ссылки Войди или Зарегистрируйся указана ширина контейнера 1280 px. В данном случае верстка несколько нестандартна тем, что есть левый сайдбар и еще 4 колонки, т.е. всего колонок 5. Сетка же задана все равно 12-grid - как они это реализовали, я начал разбираться, сейчас мне важнее другое.
Получил задачу, в точности повторяющую данный шаблон - сайдбар и 4 колонки, хоть уср..сь, а сделай.
Столкнулся с тем, что не уверен, правильно ли я кастомизирую сетку bootstrap для этого шаблона.
Т.е. чтобы повторить, слизать верстку 1 к 1, какие задать container sizes, gutter, breakpoints etc.
Что то задаю, что то получаю, но совсем не уверен...
Кроме того хочу проверить еще, как это все выглядит до верстки, для этого создал сетку в фотошопе, исходя из контейнера 1280, слева-справа по 15 и по 30 под разделители, сделал полный скриншот страницы и поместил его в эту сетку - но что то выглядит совсем не айс...
В общем, если у кого есть время, гляньте плз, как правильно скомпилить bootstrap исходя из того что есть... и да, правильно или нет я рассуждаю по созданию фотошопной сетки?

 

[shake1]

Device Information and Grid Examples
Для просмотра ссылки Войди или Зарегистрируйся

 

[zALEHANz]

Ума не приложу, где вы увидели 5 колонок? Я увидел две колонки, первая сайдбар, вторая контент. соотношение 3 к 9. В колонке контента, прописаны индивидуальные не бутстраповские стили (хотя ничто не мешало использовать бутстраповские), разбивающие карточки товара на 4 колонки
Упрощенно сетка выглядит так
col-md-3
col-md-9
----row
-------col-md-4
-------col-md-4
-------col-md-4
-------col-md-4

 

[typus]

Ума не приложу, где вы увидели 5 колонок? Я увидел две колонки, первая сайдбар, вторая контент. соотношение 3 к 9. В колонке контента, прописаны индивидуальные не бутстраповские стили (хотя ничто не мешало использовать бутстраповские), разбивающие карточки товара на 4 колонки
Упрощенно сетка выглядит так
col-md-3
col-md-9
----row
-------col-md-4
-------col-md-4
-------col-md-4
-------col-md-4

Это не совсем так - если вы посмотрите на код внимательне, то увидите там кроме col-md-3 и col-sm-9 еще и соот-но каждому классы col-lg-2-4 и col-lg-9-6 - а если также внимательно посмотреть на шаблон, можно заметить, что пропорции там не совсем 3 к 9.
Сделал картинку, там это особенно хорошо заметно, и сайдбар непонятно, на 3 или на 2 колонки, и вторая часть начинается не совсем с 4-й.
Я сейчас за машиной, у которой экран немного меньше максимально нужных 1320px, при которых заметна максимальная ширина контейнера - 1280.
Я уже понял свою ошибку, сделал скрин на большом экране и все совмещается, в принципе, там 1250 плюс паддинги по 15 слева и справа, вот и получается 1280.
Характерно, что бутстрапоские стили тема подтягивает дефолтные, т.е. для сетки 1170, а остальное кастомизировано уже в теме.
Я же хотел кастомизировать бутстраповскую сетку, теперь даже не знаю. Может повнимательнее присмотрюсь к их решениям..

 

[alex_me]

В sass можно выставить свои брейкпойнты


$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);

$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);

Для просмотра ссылки Войди или Зарегистрируйся

 

[zALEHANz]

еще и соот-но каждому классы col-lg-2-4 и col-lg-9-6

Это я заметил. Простое допиливание стандартных бутстраповских стилей. Скачайте их кастомный Для просмотра ссылки Войди или Зарегистрируйся, прикрутите к своему проекту, и пропишите так же как в этом шаблоне, вот и все дела)

 

[alex_me]

Простое допиливание стандартных бутстраповских стилей.

Сам бутстрап тоже кастомный - сгенерирован кастомайзером. Нужно также скопировать bootstrap.min.css и bootstrap-theme.min.css

 

[man44]

тебе нужно создать кастомную сетку bootstrap с нечетным количеством колонок как тебе нужно в кастомайзере bootstrap Для просмотра ссылки Войди или Зарегистрируйся