在桌面模式下,我需要导航栏没有任何背景色。 桌面模式下我的导航栏的代码是:
<nav class="navbar navbar-expand-sm">
但是当我使用小屏幕设备时,我需要将另外两个类应用于导航栏:
这个navbar-light
和这个bg-light
。
如何使用媒体查询来做到这一点?
答案 0 :(得分:0)
您始终可以将这些类添加到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*/}
}
答案 1 :(得分:0)
借助媒体查询,您的问题可以得到解决;
<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*/}
}