Контакты
Местоположение
Россия

Достижения

Все достижения (1)

Наибольший вклад в теги

Все теги (15)

Лучшие ответы пользователя

Все ответы (17)
  • Как верстать 18 колоночный макет?

    mroforolhc
    @mroforolhc
    умственно отсталый
    1. npm install bootstrap
    2. Создаёшь файл bootstrap_custom.scss и _settings.scss

    bootstrap_custom.scss

    // Settings
    @import "./settings";
    
    // Required
    @import "../../node_modules/bootstrap/scss/functions";
    @import "../../node_modules/bootstrap/scss/variables";
    @import "../../node_modules/bootstrap/scss/mixins";
    
    // Optional
    @import "../../node_modules/bootstrap/scss/grid";
    @import "../../node_modules/bootstrap/scss/utilities/display";
    @import "../../node_modules/bootstrap/scss/utilities/flex";

    Можно подключить что-то ещё, по желанию.
    _settings.scss

    $grid-columns: 18;  // количество колонок
    
    $grid-gutter-width: 30px; // отступ между колонками (по желанию можно для каждого брейкпоинта указать свой отступ
    
    $grid-breakpoints: (  // брейпоинты
      xs: 0,
      sm: 576px,
      md: 768px,
      lg: 992px,
      xl: 1200px
    );
    
    $container-max-widths: (  // максимальная ширина контейнера
      sm: 540px,
      md: 720px,
      lg: 960px,
      xl: 1140px
    );


    А дело всё в том, что в исходниках бутстрапа после каждой переменной указан флаг !default, благодаря которому значения по умолчанию присваиваются только если эта переменная не была раньше инициализирована. Поэтому мы можем создать конфиг и импортировать его раньше, чем исходники бутстрапа.
    Ответ написан
    Комментировать