Почему Boostrap 4.4.1 медиа-запрос не работает? - PullRequest
Новая
       7

Почему Boostrap 4.4.1 медиа-запрос не работает?

0 голосов
/ 22 марта 2020

Я пытаюсь добавить адаптивный дизайн для моего веб-приложения, используя медиазапросы с Bootsrtap 4.4.1.

Я пытался протестировать медиазапросы со следующими

Это мои стили. css

@media only screen and (max-width: 575.98px) {
  body {
    background-color: red;
  }
}

@include media-breakpoint-up(sm) {
  .buttons {
    background-color:rgba(255,180,50,0.7);
  }
}

Ничего не меняется, когда я тестирую это на маленьком устройстве , Когда я запускаю приложение, я вижу, что стиль появляется в инструментах chrome dev, но он не применяется.

  1. Я что-то здесь упускаю? Нужно ли что-то импортировать, чтобы использовать медиазапросы с Bootsrtap?

  2. Какое правило я должен использовать @include или просто @media?

Ответы [ 3 ]

0 голосов
/ 22 марта 2020

Если вы можете создать небольшой мини-пример /, то мы можем быть уверены, что проблема не в другом месте проекта.

@ include предназначен для включения mixins / при использовании SCSS / Sass. Также 575.98px является диким числом. Вы не должны использовать десятичные пиксели. Ничто не указывает на c. Может быть, вы можете объяснить это более подробно в CSS Discord: https://discord.gg/pFc6XmH

.thing {
  padding: 20px;
  background-color: red;
}

@media (min-width: 500px) {
  .thing {
    background-color: blue;
  }
}

https://jsfiddle.net/sheriffderek/q8jz7Lt9

.thing {
  padding: 20px;
  background-color: red;
}

@media (min-width: 500px) {
  .thing {
    background-color: blue;
  }
}

@media (min-width: 700px) {
  .thing {
    background-color: orange;
  }
}
<div class="thing">
  THING!
</div>
0 голосов
/ 31 марта 2020

Я просто хотел подтвердить, что это теперь решено. Я упустил из виду тот факт, что на <body> было фоновое изображение, поэтому этот фрагмент не работал. 

@media only screen and (max-width: 575.98px) {
  body {
    background-color: red;
  }
}

После удаления фонового изображения был применен стиль. Спасибо за помощь и понимание!

0 голосов
/ 22 марта 2020

Эти медиазапросы заканчиваются в ваших стилях. css? Ваши стили. Файл css должен быть объявлен в заголовке после файла bootstrap css. Теперь что-то переписать ваши медиа-запросы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...