Переопределение загрузочного буфера 3 медиа-запросов

Как вы переопределяете медиа-запрос в Bootstrap 3?

Например, у меня есть пользовательская таблица стилей, и я хочу переопределить медиа-запрос с минимальной шириной: 768 пикселей на минимальную ширину: 1200 пикселей.

Каждый раз, когда я делаю это, он не применяет настройки. Однако, если я изменил этот медиа-запрос на собственный файл CSS файла Bootstrap, он будет работать!

Для уточнения:

bootstrap.css:

@media (min-width: 768px) {
  .navbar-header {
    float: left;
  }
}

Мой custom.css:

@media (min-width: 1200px) {
 .navbar-header {
 float: left;
 }
}

Пожалуйста, помогите мне.

Ответы

Ответ 1

Когда вы используете bootstrap css, они определяются как:

@media (min-width: 768px) {
  .navbar-header {
    float: left;
  }
}

Таким образом, это правило всегда применяет правило css, когда оно находится выше или на той же ширине 768, даже если вы применяете свое правило СМИ 1200 после факта. Это связано с тем, что вы никогда не переопределяете предыдущее правило, вы просто добавляете новую точку останова.

Чтобы переопределить правило бутстрапа по умолчанию, используйте что-то вроде:

@media (min-width: 768px) {
  .navbar-header {
    float: none;
  }
}

В вашем собственном файле custom.css(конечно же обязательно включите свой файл custom.css после загрузки bootstrap.css, чтобы сделать пользовательскую загрузку последней).

Ответ 2

Если я правильно вас понимаю, вы хотите, чтобы заголовок плавал при 1200px, а не на 768px, правильно? Таким образом, вы используете это:

@media (min-width: 768px) {
 .navbar-header {
  float: initial;
 }
}

чтобы сделать настройку для 768px неэффективной, а затем просто определить ее для 1200px

@media (min-width: 1200px) {
 .navbar-header {
 float: left;
 }
}

Надеюсь, я правильно понял ваш вопрос!

Ответ 3

Я бы рекомендовал переопределить следующий variables.less в источнике Bootstrap примерно так:

@grid-float-breakpoint: @screen-lg;

Если вы уже пишете стили в LESS, добавьте свой собственный custom.less файл после vanilla bootstrap.less, а затем, когда вы скомпилируете, переменные, определенные позже, будут иметь приоритет.

Или скопируйте операторы @import из bootstrap.less непосредственно в свой собственный custom.less, обновите пути для своей среды, (т.е. @import: "../node_modules/bootstrap/less/normalize.less";) закомментируйте модули, которые вам не нужны, затем скомпилируйте свой собственный... Для еще более компактного вывода CSS!

Я использую Node, Grunt grunt-contrib-less для автоматизации этих задач.