Html 移动视图上的不同菜单

如何在布局中获得不同的菜单样式

例如，在桌面视图中有主页、个人资料和消息，在响应式移动布局中，每个菜单点前应有一个图标。但不是在桌面版本中

我使用bootstrap作为框架，我尝试了两种方法，但都没有成功

<header role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Brand</a>
    </div>
    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Messages</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Login</a></li>
        </ul>
    </div>
</div>

切换导航

如果视口小于桌面，我是否必须创建额外的移动菜单并关闭正常菜单？

---

我想你需要的是媒体查询

例如：

body {
    background-color:lightgreen;
}

@media only screen and (max-width: 500px) {
    body {
        background-color:lightblue;
    }
}

当此文档的宽度小于500像素时，背景颜色为“浅蓝色”，否则为“浅绿色”

因此，您可以为桌面视图和移动视图定义不同的样式。 您可以隐藏桌面上的图标

---

请不要像linusg说的那样使用JQuery。JQuery已经过时了，它是一个很好的框架，但现在已经不是了。使用普通的javascript（使用最新的标准ECMAScript 6，可能还有ECMAScript 7）。

就像Zlatko Vujicic评论的那样简单：只需在css中添加一个媒体查询，在达到特定大小时设置小型设备布局的

显示：none

虽然im有时会遇到麻烦，但您也可以使用javascript（jquery）隐藏移动导航

---

希望这有帮助

这是唯一的逻辑，把你的图标放在文本之前，让它们显示：无；之后，将显示切换为带媒体查询的内联块。这就是全部。