gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 02:38:24 24 4
gpt4 key购买 nike

我正在尝试为小屏幕和大屏幕创建两个不同的 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-layoutmdl-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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com