9

即使我在抽屉上添加了“mdl-layout--small-screen-only”类，汉堡包图像仍然出现在大屏幕上。

<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>

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

4

5 回答 5

11

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

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

可选的; 继续mdl-layout元素

GitHub

于 2016-04-03T11:18:49.997 回答
1

将以下内容添加到您的 CSS 中。这会隐藏在宽度小于 1024 像素的屏幕上

@media screen and (min-width: 1024px) {
    .mdl-layout__drawer-button {
        display: none;
    }
}
于 2017-08-23T13:37:35.787 回答
0

试听课

hide-on-large-only
于 2016-09-13T15:20:15.017 回答
0 
@media screen and (min-width: 992px) {
    .mdl-layout__drawer {
        display: none;
    }
}

PS 不知道什么.mdl-layout--small-screen-only看起来像一些 BEMish 框架/库。可能媒体查询的顺序不正确，或者您的设置失败或其他原因。我不是心灵感应者。虽然我试过了，但从来没有过。事情可能会在未来（远或近）发生变化。

于 2015-07-18T21:57:34.987 回答
-1

更换

mdl-layout--small-screen-only

带一个

mdl-cell--hide-desktop

快速。

见这里： http: //mdlhut.com/2015/07/mdl-displaying-content-for-specific-viewports/

于 2015-07-25T17:59:41.813 回答