【发布时间】：2020-08-07 14:35:55
【问题描述】：
所以我只想为移动（汉堡）菜单应用一些 CSS。我想你可以为它改变的宽度做一个@media 屏幕和 (max-width: 600px) 样式，但这看起来很乱。
是否有仅与移动菜单相关的样式？这样我可以做类似的事情：
.mobile-menu .nav-link {
colour: red;
padding: 40px;
}
仅将移动菜单设为红色并填充为 40px，而桌面菜单将保持正常。如果没有设置样式，创建仅影响移动菜单项的 CSS 的最佳方法是什么？
为了帮助，这里是html代码：
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">
<img class="img-fluid d-md-none" src="images/banner_logo_small.png">
<img class="img-fluid d-none d-md-block" src="images/banner_logo.png">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">COMMUNITY SUPPORT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
这是 .css 中的代码：
.navbar {
background:#FF8200;
padding: 0;
}
.nav-link,
.navbar-brand {
color: #fff;
cursor: pointer;
padding: 0;
}
.nav-link {
margin-right: 1em !important;
font-weight: bold;
}
.nav-link:hover {
color: #3D3935;
}
.navbar-collapse {
justify-content: flex-end;
}
.d-md-none .navbar-collapse {
padding: 200px;
color: red;
}
因此，目前的目标是仅让移动菜单中的项目具有 200 像素的内边距并变为红色。
这是一个示例：https://www.codeply.com/p/uVOV67zz6E 可以玩，目的是让移动设备中的菜单项变为红色，而在桌面视图中保持白色。
问题当然是在 Bootstrap 中它在移动和桌面菜单中的相同项目，bootstrap 只是根据页面宽度更改 css。
【问题讨论】：
标签： css mobile bootstrap-4