用于MDL中大屏幕和小屏幕的不同mdl-layout__drawer [英] Different mdl-layout__drawer for large screen and small screen in MDL

问题描述

我试图为小屏幕和大屏幕创建两个不同的mdl-layout__drawer。根据下面的代码，只有在小屏幕上，mdl-layout__drawer显示它没有在大屏幕上显示。

 < div class =mdl-layout__drawer mdl-layout  - 大屏幕> 
< span class =mdl-layout-title>< img src =〜/ images / transfeteBirdLogo.pngwidth =80height =80/>< / span> 
< nav class =mdl-navigation> 
< a class =mdl-navigation__linkhref => Link21< / a> 
< a class =mdl-navigation__linkhref =>连结< / a> 
< a class =mdl-navigation__linkhref =>连结< / a> 
< a class =mdl-navigation__linkhref =>连结< / a> 
< / nav> 
< / div> 
 
< div class =mdl-layout__drawer mdl-layout  -  small-screen-only> 
< span class =mdl-layout-title>< img src =〜/ images / transfeteBirdLogo.pngwidth =80height =80/>< / span> 
< nav class =mdl-navigation> 
< a class =mdl-navigation__linkhref => Link11< / a> 
< a class =mdl-navigation__linkhref =>连结< / a> 
< a class =mdl-navigation__linkhref =>连结< / a> 
< a class =mdl-navigation__linkhref =>连结< / a> 
< / nav> 
< / div> 
  

任何人都可以告诉我代码中有什么问题。我应该如何解决这个问题。

你的整个代码应该包含在包含 mdl- layout ， mdl-js-layout 和 mdl-layout - 固定抽屉类。最后一个负责在大屏幕上显示导航菜单。笔此处。

 < 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.pngwidth =80height =80/>< / span> 
< nav class =mdl-navigation> 
< a class =mdl-navigation__linkhref => Link21< / a> 
< a class =mdl-navigation__linkhref =>连结< / a> 
< a class =mdl-navigation__linkhref =>连结< / a> 
< a class =mdl-navigation__linkhref =>连结< / a> 
< / nav> 
< / div> 
 
< div class =mdl-layout__drawer mdl-layout  -  small-screen-only> 
< span class =mdl-layout-title>< img src =〜/ images / transfeteBirdLogo.pngwidth =80height =80/>< / span> 
< nav class =mdl-navigation> 
< a class =mdl-navigation__linkhref => Link11< / a> 
< a class =mdl-navigation__linkhref =>连结< / a> 
< a class =mdl-navigation__linkhref =>连结< / a> 
< a class =mdl-navigation__linkhref =>连结< / a> 
< / nav> 
< / div> 
< / div> 
  

I, am trying to create two different mdl-layout__drawer for small screen and large screen. As per the below code only on small screen the mdl-layout__drawer is showing it is not showing on large screen.

<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>

Can anyone tell me what is wrong in the code. How can I solve this issue.

解决方案

Your whole code should be wrapped in a div containing mdl-layout, mdl-js-layout and mdl-layout--fixed-drawer classes. The last one is responsible for showing the navigation menu in large screens. 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>

这篇关于用于MDL中大屏幕和小屏幕的不同mdl-layout__drawer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！