仅适用于小屏幕尺寸的课程

Question

在桌面模式下，我需要导航栏没有任何背景色。 桌面模式下我的导航栏的代码是：

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

但是当我使用小屏幕设备时，我需要将另外两个类应用于导航栏：

这个navbar-light和这个bg-light。

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

Answer 1

您始终可以将这些类添加到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*/}
    }

Answer 2

借助媒体查询，您的问题可以得到解决；

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