Как получить 15 столбцов в Bootstrap 4 в SASS CSS?

У меня есть дизайн макета, явно созданный для фреймворка 1200px/15 cols, но мой клиент хочет использовать Bootstrap 4 только с SASS. Возможно ли вообще преобразовать Bootstrap в макет из 15 столбцов? Я не видел такого примера в Интернете. Я не большой поклонник Bootstrap для небольших проектов. Это тенденция, которую я, честно говоря, не понимаю. Может быть слишком тяжелым для 5-страничного веб-сайта, и проекты обычно выполняются в соответствии с содержанием, а не в соответствии с какой-либо структурой, поддерживаемой Twitter или нет.

Но это все.

Если бы было возможно закодировать макет из 15 столбцов, не могли бы вы подсказать, с чего начать? И сколько времени потребуется на такую ​​адаптацию?


sass bootstrap-4 compass-sass twitter-bootstrap-4
person Md.Mahmudul Hasan Tuhin    schedule 06.01.2017    source источник
comment
Вы можете убрать систему сетки из бутстрапа. Кроме того, число 15 можно разделить только на 5 и 3, а число 12 можно разделить на 2, 3, 4 и 6. Это сэкономит вам массу времени. Что касается создания собственной сетки, где-то от 3 до 4 часов (если вы делаете это структурно), в зависимости от вашего опыта.   -  person DevNebulae    schedule 06.01.2017

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете просто перекомпилировать bootstrap 4 с правильными настройками.

Документация по адресу: https://v4-alpha.getbootstrap.com/layout/grid/#customizing-the-grid должен объяснить это, но поскольку это временная ссылка, я включу ее сюда.

Сначала вы должны иметь возможность встроить SASS в CSS, но в целом вам просто нужно установить переменную для количества столбцов, прежде чем включать файл начальной загрузки, который будет создан, или изменить файл variable.scss и изменить значение $grid-columns значение так:

$grid-columns:               15;

Это отправная точка, возможно, вам придется настроить другие переменные сетки, чтобы контролировать общую ширину и отступ между каждым столбцом и т. д.

person MiltoxBeyond    schedule 06.01.2017
comment
Обновленная документация для текущей версии находится здесь: https://getbootstrap.com/docs/4.1/layout/grid/ - person StephenSolace; 24.06.2018

arrow_upward
2
arrow_downward

Вам просто нужно изменить переменную $grid-columns с помощью SASS.

$grid-columns: 15;

Вы также можете проверить другие переменные, такие как $grid-gutter-width, чтобы уменьшить расстояние между столбцами, поскольку вы используете больше столбцов.

Рабочая демонстрация

См. также:
создание пользовательской сетки номер для начальной загрузки - Bootstrap

person Zim    schedule 06.01.2017