MDL中大屏和小屏不同的mdl-layout__drawer

Posted 2023-02-22

【中文标题】MDL中大屏和小屏不同的mdl-layout__drawer

【英文标题】：Different mdl-layout__drawer for large screen and small screen in MDL

【发布时间】：2018-01-27 00:31:02

【问题描述】：

我正在尝试为小屏幕和大屏幕创建两个不同的 mdl-layout__drawer。根据以下代码，仅在小屏幕上显示 mdl-layout__drawer 未在大屏幕上显示。

<div class="mdl-layout__drawer mdl-layout--large-screen-only">
        <span class="mdl-layout-title"><img src="~/images/transfeteBirdLogo.png"   /></span>
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Link21</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>

    <div class="mdl-layout__drawer mdl-layout--small-screen-only">
        <span class="mdl-layout-title"><img src="~/images/transfeteBirdLogo.png"   /></span>
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Link11</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>

谁能告诉我代码有什么问题。我该如何解决这个问题。

【参考方案1】：

您的整个代码应该包含在一个包含mdl-layout、mdl-js-layout 和mdl-layout--fixed-drawer 类的div 中。最后一个负责在大屏幕中显示导航菜单。笔here.

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
  <div class="mdl-layout__drawer mdl-layout--large-screen-only">
    <span class="mdl-layout-title"><img src="~/images/transfeteBirdLogo.png"   /></span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link21</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>

  <div class="mdl-layout__drawer mdl-layout--small-screen-only">
    <span class="mdl-layout-title"><img src="~/images/transfeteBirdLogo.png"   /></span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link11</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>
</div>