Как уменьшить html или ширину тела с помощью медиа-запросов

Question

Я просто хочу немного уменьшить ширину рабочего стола, но не могу заставить его работать с медиа-запросом. Моя последняя попытка

@media (min-width: 992px) and (max-width: 1199.98px) {

   html, body {
        max-width: 80%;
   }
}

, но она не имеет никакого эффекта. Я не думаю, что я хочу связываться с контейнером b / c, который пропустил бы панель навигации. Использование моей собственной таблицы стилей (добавлено ниже bootstrap cdn stuff) вместо использования медиазапросов непосредственно в шаблоне. html, но я не знаю, имеет ли это какое-либо значение. Я пытаюсь сделать это правильно или я что-то упускаю?

Answer 1

Вы не хотите go стучать по элементам высокого уровня при использовании библиотеки макетов. Это ограничивает то, что вы и другие можете сделать на странице позже (скажем, вы хотите где-нибудь полноразмерный баннер). Вы также, вероятно, не хотите случайно переопределять все экземпляры класса Bootstrap.

В этом случае обратите внимание на добавление пользовательского класса к элементу .container или .container-fluid, ограничение его ширины:

.container.narrow {
    max-width: 80%;
}

Используйте это для любых контейнеров, где требуется более узкий width, и используйте контейнеры без этого класса для более широкого содержимого.

<div class="container narrow"> ... </div>

Применение этого в медиа-запросе, вероятно, не имеет значения