仅在小屏幕尺寸上应用课程 [英] 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:

此navbar-light和此bg-light.

如何使用媒体查询来做到这一点?

How do I do this, using media-queries?

推荐答案

您始终可以将这些类添加到div中，但是在媒体查询中具有这些类的样式.

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

这篇关于仅在小屏幕尺寸上应用课程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！