6

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

谢谢你。

4

6 回答 6

5

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

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

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

于 2015-07-14T01:27:28.490 回答
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">

于 2017-09-02T10:08:21.383 回答
3

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

mdl 布局--仅小屏幕
. 这是一个例子：

<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 上注意到了一个类似的问题，那里的解决方案可能更合适：如何在大屏幕上隐藏抽屉并仅在小屏幕上显示。？

于 2015-07-26T07:14:30.947 回答
1

您可以使用与在桌面上获取固定抽屉mdl-layout--fixed-drawer相同的元素，mdl-js-layout该抽屉应该删除按钮以查看它并使其始终打开以供访问。

于 2015-07-13T00:07:02.973 回答
0

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

hide-on-large-only
于 2016-09-13T15:30:06.837 回答
0

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

<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>
于 2016-02-17T01:15:02.740 回答