我,正在尝试创建两个不同的mdl布局__抽屉为小屏幕和大屏幕。根据下面的代码,只有在小屏幕上,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>谁能告诉我代码中有什么地方错了吗?我该如何解决这个问题。
发布于 2017-08-21 18:24:33
您的整个代码应该包装在一个包含mdl-layout、mdl-js-layout和mdl-layout--fixed-drawer类的目录中。最后一个负责在大屏幕上显示导航菜单。Pen 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>https://stackoverflow.com/questions/45754638
复制相似问题