如何在MudBlazor的MudDrawer中将内容对齐到底部？

MudDrawer的默认内容容器是块级布局，直接给子元素加margin或flex类不会生效，得先把Drawer的内容容器改成垂直flex布局：

1. 给MudDrawer组件添加ContentClass="d-flex flex-column h-100"，让内容容器以垂直flex方式排列，且高度占满整个Drawer。
2. 给包裹MudNavMenu的MudPaper加上flex-grow-1类，让它自动填充Drawer里除Switch之外的剩余空间，迫使Switch被推到底部。
3. 可以给MudSwitch加边距类（比如p-3），避免它贴在Drawer边缘。

修改后的完整代码示例：

<MudDrawer ContentClass="d-flex flex-column h-100">
  <MudPaper Class="py-3 flex-grow-1" Elevation="0">
    <MudNavMenu>
      <MudNavLink Href="/" Match="NavLinkMatch.All">Home</MudNavLink>
      <MudNavLink Href="/posts" Match="NavLinkMatch.All">Articles</MudNavLink>
      <MudNavLink Href="/about" Match="NavLinkMatch.All">About</MudNavLink>
    </MudNavMenu>
  </MudPaper>
  <MudSwitch @ref="@darkModeSwitch" Class="p-3" />
</MudDrawer>

关键类说明 #

• d-flex flex-column：将Drawer内容容器设置为垂直方向的flex布局
• h-100：让容器高度占满Drawer的可用空间
• flex-grow-1：让NavMenu所在的Paper组件占据所有剩余垂直空间，固定Switch的底部位置

内容的提问来源于stack exchange，提问作者Jonathan