更改MDL中抽屉的宽度

Question

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

我曾尝试是沿着这些路线的东西：

.mdl-layout__drawer { 
    width: 25%; 
} 

这导致抽屉重叠内容区域。

如何解决此问题？

Answer 1

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

这里的CSS只为500像素的宽度溶液 -

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

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

这里的一个例子codepen - http://codepen.io/mdlhut/pen/pJmjBe