我正在尝试为小屏幕和大屏幕创建两个不同的 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" width="80" height="80" /></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" width="80" height="80" /></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>
谁能告诉我代码中有什么问题。我该如何解决这个问题。
最佳答案
您的整个代码应该包含在一个包含 mdl-layout
的 div 中, mdl-js-layout
和 mdl-layout--fixed-drawer
类。最后一个负责在大屏幕上显示导航菜单。钢笔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" width="80" height="80" /></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" width="80" height="80" /></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>
关于html - MDL中大屏和小屏的不同mdl-layout__drawer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45754638/