如何在 Angular Material Design 中更改 Sidenav 的宽度？答案

【问题标题】：How to change width of a Sidenav in Angular Material Design?如何在 Angular Material Design 中更改 Sidenav 的宽度？
【发布时间】：2025-12-31 15:40:11
【问题描述】：

无论我使用什么屏幕尺寸，Sidenav 始终是相同的尺寸。我尝试添加属性，例如 - 柔性 - flex="85"（获取容器的 85%）

似乎找不到好的方法。

【问题讨论】：

标签： css angularjs angular-material

【解决方案1】：

在 Angular 材质中，md-sidenav 具有以下属性：

width: 304px;
min-width: 304px;

这就是为什么无论您使用什么设备，宽度都将固定为 304 像素。所以如果你想改变你的sidenav宽度，你必须稍微改变一下css。

如果您只支持现代浏览器没问题，您可以将其更改为 vw 度量（视口宽度的 1/100）并将其添加到单独的 css 文件中。代码将如下所示：

md-sidenav, 
md-sidenav.md-locked-open, 
md-sidenav.md-closed.md-locked-open-add-active {
    min-width: 200px !important;
    width: 85vw !important;
    max-width: 400px !important;
}

这是一个笨蛋：http://plnkr.co/edit/cXfJzxsAFXA3Lh4TiWUk?p=preview

【讨论】：

不幸的是，这对我不起作用，我很难理解为什么！
这似乎扼杀了它打开的动画。

【解决方案2】：

user3587412 提交的答案允许我更改宽度，但我遇到了与 Craig Shearer 相同的问题，它杀死了动画。所以我尝试了一些不同的方法并想出了这个。

 md-sidenav.md-locked-open {
   width: 250px;
   min-width: 250px;
   max-width: 250px;
 }

我不确定这是否是正确的方法，但它似乎对我有用。

【讨论】：

工作，但是当动画打开侧边栏动画时，转到304px，然后采用覆盖宽度。不知道如何更好地处理这个问题。

【解决方案3】：

感谢 user3587412，我可以轻松找到所需的样式。要让 md-sidenav 适应 flex 父级，只需覆盖

md-sidenav, 
md-sidenav.md-locked-open, 
md-sidenav.md-closed.md-locked-open-add-active {
    min-width: 0px !important;
    width: auto !important;
    max-width: none !important;
}

【讨论】：

【解决方案4】：

在此线程中尝试不同的 CSS 后，我最终得到：

md-sidenav,
md-sidenav.md-locked-open-add-active,
md-sidenav.md-closed.md-locked-open-add-active,
md-sidenav.md-locked-open {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
}

我目前正在使用 angular-material 1.0.8 并仅使用 Chrome 50 进行测试。

有了这个 CSS 对我有用：

动画关闭和打开确定
锁定时正常
未锁定时正常

【讨论】：

【解决方案5】：

这是一个有点“卡顿”的解决方案，但它根本不会弄乱动画。 sidenav 会自动按照其中的项目的顺序调整自身大小以完美匹配。因此，您只需将具有您选择的宽度的跨度添加到垫子抽屉中即可设置最小尺寸。请注意，这只适用于设置最小宽度，而不是最大宽度。 <span style="height: 0px; width: 200px; display: inline-block;"></span>

【讨论】：

【解决方案6】：

我也遇到了这个问题——尽管304px 的宽度很大，但我在右侧的内容区域中有一张卡片正在挤压侧导航。因此，使用 flex 网格，我能够添加 <md-sidenav flex="15" class="md-sidenav-left ... 来获得我想要的宽度，而无需覆盖 CSS。听起来这对您不起作用，所以可能与您设计中的布局选项有关...

【讨论】：

如果 sidenav 是由服务生成的，而不是直接写入 md-sidenav 指令怎么办？我对是否应该删除服务以仅使用指令感到困惑，但这样做让我很痛苦。
我的错，我刚刚意识到sidenav标签只是在索引页面中并且由服务操作，而不是由服务生成。

【解决方案7】：

如果有人使用最新的mat-sidenav 来到这里，您可以显式设置元素的宽度。

mat-sidenav {
  width: 200px;
}

文档告诫不要使用基于百分比的大小。 https://material.angular.io/components/sidenav/overview#setting-the-sidenavs-size

【讨论】：