css – 如何在大屏幕上隐藏抽屉并在小屏幕上显示.

前端之家收集整理的这篇文章主要介绍了css – 如何在大屏幕上隐藏抽屉并在小屏幕上显示.前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
即使我在抽屉上添加“mdl-layout – 仅限小屏幕”类,汉堡包图像仍会出现在大屏幕上. @H_403_2@<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <!-- Title --> <span class="mdl-layout-title">Title</span> <!-- Add spacer,to align navigation to the right --> <div class="mdl-layout-spacer"></div> <!-- Navigation. We hide it in small screens. --> <nav class="mdl-navigation mdl-layout--large-screen-only"> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> </nav> </div> </header> <div class="mdl-layout__drawer mdl-layout--small-screen-only"> <span class="mdl-layout-title">Title</span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> </nav> </div> <main class="mdl-layout__content"> <div class="page-content"><!-- Your content goes here --></div> </main> </div>

我只需要在大屏幕上隐藏抽屉,包括导航栏上的图标.谢谢

解决方法

MDL-布局 – 没有桌面抽屉式按钮

在桌面模式下不显示抽屉按钮

可选的;继续使用mdl-layout元素

GitHub

猜你在找的CSS相关文章