在MDL中更改抽屉的宽度

Question

我刚刚开始使用Material Design Lite.我想改变抽屉的宽度.

我试过的是这些方面:

.mdl-layout__drawer {
  width: 25%;
}

这导致抽屉与内容区域重叠.

我该如何解决这个问题？

Answer 1

抽屉是一个绝对组件,它在父容器中放置一个定义的左侧位置.当你改变它的宽度时,你也需要改变它的位置.

这是宽度为500px的css唯一解决方案 -

.mdl-layout__drawer {
  width: 500px;
  left: -250px;
}

.mdl-layout__drawer.is-visible {
  left: 0;
}