Question

我是新手，让我知道如何隐藏菜单图标，它会自动添加而不会被提示，我只想在小屏幕上显示。抱歉英语不好。

谢谢。

Answer 1

我不得不求助于媒体查询来解决我的问题。

@media only screen and (min-width:851px){ .mdl-layout__drawer-button { display: none; } }

这是我找到的最佳解决方案，感谢@dshun和@garbee的帮助。

Answer 2

实现此目的的另一种方法是添加各种屏幕尺寸类，例如

mdl-layout--small-screen-only

。这是一个例子：

<div class="mdl-layout__drawer mdl-layout--small-screen-only">
    <span class="mdl-layout-title">Drawer Title</span>

    <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="">Link 1</a>
        <a class="mdl-navigation__link" href="">Link 2</a>
        <a class="mdl-navigation__link" href="">Link 3</a>
    </nav>
</div>

如果该代码段不适合你，我很抱歉。我刚刚在StackOverflow上发现了一个类似的问题，解决方案可能更合适：How can I hide drawer on large screens and show just on small screens.?

Answer 3

mdl-layout--no-desktop-drawer-button

在桌面模式下不显示抽屉按钮，继续mdl-layout element

这是一个相同的例子：

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--no-desktop-drawer-button">

Answer 4

您可以在使用mdl-layout--fixed-drawer的同一元素上使用mdl-js-layout来获取桌面上的固定抽屉，该抽屉应移除按钮以查看它并始终保持打开以进行访问。

Answer 5

我找到的最终有效的解决方案是：

<style>
       @media screen and (min-width: 992px) {
        .mdl-layout__drawer-button {
            /* Hide the Hamburger button but will leave an unused space */
            display: none;
        }
        .mdl-layout__header-row {
            /* so important to make sure the Hamburger button didn't leave an unused space */
            padding-left: 24px !important; 
        }
    }
</style>

Answer 6

要在大屏幕中隐藏div，请添加此类

hide-on-large-only

如何在大屏幕上隐藏图标菜单？

6 个答案: