【问题标题】:material design drawer issue材料设计抽屉问题
【发布时间】:2019-03-09 07:11:52
【问题描述】:

我有一个 codepen,其中有一个带有顶部应用栏组件的可关闭抽屉 在调整到 598px 宽度时,顶部应用栏宽度从 64px 减小到 56px 但是当使用@media 查询来对齐它时,抽屉没有对齐,请问你能解决这个问题吗

codepen >>> https://codepen.io/BhavyaSingh2003/pen/NJbGoO

 @media all and (max-width: 599px) {
 .mdc-drawer--dismissible {
   top: 56px;
   height: calc(100% - 56px);
  }
}

【问题讨论】:

    标签: css sass material-design mdc-components


    【解决方案1】:

    此 CSS 声明:

    .app-drawer-layout .mdc-drawer--dismissible
    

    拥有更多specificity (weight),而不仅仅是:

    .mdc-drawer--dismissible
    

    所以你可以编写具有相同特性的选择器:

    @media all and (max-width: 599px) {
      .app-drawer-layout .mdc-drawer--dismissible {
        top: 56px;
        height: calc(100% - 56px);
      }
    }
    

    ...或将 !important 添加到您的 CSS:

    @media all and (max-width: 599px) {
      .mdc-drawer--dismissible {
        top: 56px !important;
        height: calc(100% - 56px) !important;
      }
    }
    

    【讨论】:

    • 感谢 rusten gareev,因为这支笔是您在 codepen 上的笔的叉子,您制作了不错的材料设计笔。
    • 刚刚注意到了!谢谢!我一定会继续编写有关 MDC Web 的代码笔。你可以问我任何进一步的问题!
    • @rusteemgareev 能否请您删除此答案或为问题投票,因为 -1 在我的个人资料上看起来不太好
    猜你喜欢
    • 2015-05-14
    • 1970-01-01
    • 2014-12-21
    • 1970-01-01
    • 1970-01-01
    • 2019-06-15
    • 2014-12-16
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多