Only apply classes on small screen sizes

问题:

When I am on a desktop mode I need the navbar to be without any background color. The code for my navbar on desktop mode is:

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

But when I go on the small screen devices I need two other classes to be applied to my navbar:

this navbar-light and this bg-light.

How do I do this, using media-queries?

回答1:

You can always add the classes to the div but have the styling for the classes in the media queries.

   <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*/}
    }

回答2:

With the help of media queries your problem can be solved;

   <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*/}
        }