Применяйте занятия только на экранах небольшого размера

Question

Когда я нахожусь в режиме рабочего стола, мне нужна навигационная панель без какого-либо цвета фона. Код для моей панели навигации в режиме рабочего стола:

<nav class="navbar navbar-expand-sm">

Но когда я перехожу на устройства с маленьким экраном, мне нужно применить два других класса к моей панели навигации:

это navbar-light и это bg-light.

Как мне это сделать, используя медиа-запросы?

Answer 1

С помощью медиа-запросов ваша проблема может быть решена;

   <nav class="navbar navbar-expand-sm navbar-light bg-light">

    @media only screen
       and (min-device-width: 320px) 
       and (max-device-width : 480px)
        {
        .navbar-light
               {/*styling*/}
        .bg-light
               {/*styling*/}
        }

Answer 2

Вы всегда можете добавить классы в div, но у них есть стили для классов в медиа-запросах.

   <nav class="navbar navbar-expand-sm navbar-light bg-light">

    @media only screen and (max-width : 480px) {
        .navbar-light{/*your style*/}
        .bg-light{/*your style*/}
    }