Увеличить ширину ряда в шаблоне Modern

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО InstantCMS 2.X

Как увеличить ширину ряда в хедере?

#1 28 января 2021 в 20:08
Вопрос к знатокам Bootstrap: подскажите, пожалуйста как увеличить ширину ряда того, где лого и меню пользователя, авторизации? По умолчанию этот ряд по ширине задаётся в _variables.scss xl: 1140px.
Думаю этот вопрос будет актуален не только мне. Сейчас в трендах контейнеры разной ширины на одной странице.
#2 28 января 2021 в 20:16
Pascal, В редактировании поставьте ширину ряда 100%.
#3 28 января 2021 в 20:38
Ris
В CSS класс контейнера ряда? Не сработало.
#4 28 января 2021 в 20:41
Pascal, ну так задайте для xl и lg размеры побольше. И оперируйте ими для разных колонок.
Плюс ширину можно подобрать отступами через padding

Сейчас в трендах контейнеры разной ширины на одной странице

Pascal
покажите пример, чтобы можно было понять, что вы хотите получить
#5 28 января 2021 в 20:47
Zau4man
Пример верхний ряд с меню шире основного контейнера
#6 28 января 2021 в 20:57

В CSS класс контейнера ряда?

Pascal
#7 28 января 2021 в 21:18
Ris
Спасибо, это я видел, но допустим мне нужно не 100%, а фиксированное в px?
#8 28 января 2021 в 21:44

Спасибо, это я видел, но допустим мне нужно не 100%, а фиксированное в px?

Pascal
Тогда идите в файл \templates\modern\scss\theme\_custom.scss
и пишите туда
  1. @media (min-width: 1200px)
  2. .container, .container-sm, .container-md, .container-lg, .container-xl {
  3. max-width: 1140px;
  4. }
Вместо 1140 напишите сколько надо пикселей.
Потом панель управления — Настройки — Настройка темы — Скомпилировать и сохранить.
#9 28 января 2021 в 23:13


Спасибо, это я видел, но допустим мне нужно не 100%, а фиксированное в px?

Pascal
Тогда идите в файл \templates\modern\scss\theme\_custom.scss
и пишите туда
  1. @media (min-width: 1200px)
  2. .container, .container-sm, .container-md, .container-lg, .container-xl {
  3. max-width: 1140px;
  4. }
Вместо 1140 напишите сколько надо пикселей.
Потом панель управления — Настройки — Настройка темы — Скомпилировать и сохранить.

Ris

Спасибо з помощь.
#10 28 января 2021 в 23:13

Вопрос к знатокам Bootstrap

Pascal
Не знаток сего чуда, но ответить попробую.
Если правильно понял, вы хотите изменить ширину какого-то отдельного ряда с назначенным селектором (селекторами под брейкпойнты) container
В принципе, можно через родителя вашего контейнера значение у свойства селектора изменить. А можно и так:
Просто добавьте контейнеру какой-то селектор. К примеру, — container-1280
Иллюстрация
Если стили компилируете, то в указанный выше _custom.scss добавьте:
  1.  
  2. .container-1280 {
  3. max-width: сколько нужно;
  4. }
  5.  
если нужно применить правило только для определённых разрешений (к примеру, брейкпойнт xl), то, в том же файле:
  1.  
  2. @include media-breakpoint-up(xl) {
  3. .container-1280 {
  4. max-width: 1280px;
  5. }
  6. }
  7.  
во втором случае лучше в название селектора включить имя брейкпойнта (на результат не повлияет, но жизнь упростит).
Пробуйте. Возможно придётся приоритет повысить (!important)
#11 28 января 2021 в 23:32


Вопрос к знатокам Bootstrap

Pascal
Не знаток сего чуда, но ответить попробую.
Если правильно понял, вы хотите изменить ширину какого-то отдельного ряда с назначенным селектором (селекторами под брейкпойнты) container
В принципе, можно через родителя вашего контейнера значение у свойства селектора изменить. А можно и так:
Просто добавьте контейнеру какой-то селектор. К примеру, — container-1280
Иллюстрация
Если стили компилируете, то в указанный выше _custom.scss добавьте:
  1.  
  2. .container-1280 {
  3. max-width: сколько нужно;
  4. }
  5.  
если нужно применить правило только для определённых разрешений (к примеру, брейкпойнт xl), то, в том же файле:
  1.  
  2. @include media-breakpoint-up(xl) {
  3. .container-1280 {
  4. max-width: 1280px;
  5. }
  6. }
  7.  
во втором случае лучше в название селектора включить имя брейкпойнта (на результат не повлияет, но жизнь упростит).
Пробуйте. Возможно придётся приоритет повысить (!important)

Олег Васильевич я

Спасибо! Ваше решение работает.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.