MDL中大屏和小屏不同的mdl-layout__drawer
Posted
技术标签:
【中文标题】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>
【讨论】:
以上是关于MDL中大屏和小屏不同的mdl-layout__drawer的主要内容,如果未能解决你的问题,请参考以下文章
Bootstrap v4实现大屏中AB两列左右相反,小屏A上B下的效果 - 解决float-md-right等在row下无效的问题
Bootstrap v4实现大屏中AB两列左右相反,小屏A上B下的效果 - 解决float-md-right等在row下无效的问题