将 Menu.Item 与 Sider 内的底部对齐答案

【问题标题】：Align Menu.Item to bottom inside a Sider将 Menu.Item 与 Sider 内的底部对齐
【发布时间】：2020-05-15 03:25:11
【问题描述】：

我正在使用带有 Ant Design 的 React，并且我有一个包含菜单的垂直 Sider。

是否可以将 Menu.Items 对齐到边栏/菜单的底部？下面是 Sider 的图片。

这是我的代码：

<Sider 
    className="sider"
    collapsible 
    collapsed={this.state.collapsed}
    onCollapse={this.toggleCollapse}>
        <Menu theme="dark" mode="inline" defaultSelectedKeys={[this.state.currentRoute]}>
            <Menu.Item key="/users">
                <Icon type="user" />
                <span>Brukere</span>
                <Link to='/users' />
            </Menu.Item>
            <Menu.Item key="/secret">
                <Icon type="plus" />
                <span>Registrer ny bruker</span>
                <Link to='/secret' />
            </Menu.Item>
            <Menu.Item key="/Whatevs">
                <Icon type="check" />
                <span>Rapporterte feil</span>
                <Link to='/Whatevs' />
            </Menu.Item>
            <Menu.Divider />
            <Menu.Item  onClick={this.logOut} key="/logOut">
                <Icon type="logout" />
                <span>Logg ut</span>
                <Link to='/admin/login' />
            </Menu.Item>
        </Menu>
</Sider>

【问题讨论】：

标签： javascript html reactjs antd

【解决方案1】：

在 chrome 或您使用的任何浏览器中检查元素 (Crtl+Shift+I)。

查找 Menu 使用的 CSS 类。

更新该 css 以使用 display:flex 如果它还没有使用它。

然后添加样式flex-direction:column。

之后，为第一个 Menu.type 添加样式 margin-top: auto.

您应该在 React 中有一个全局 css 文件，您可以在其中覆盖 Ant Design 中的 css。

【讨论】：

【解决方案2】：

如果您更改来自 Antd 库的样式，则可以将 Menu.Items 对齐到侧边的底部。您可以随时检查您需要在 Chrome 开发工具中更改哪些类（它们都以 .ant 开头）。在您的 .less 文件中更改 .ant-menu-dark.ant-menu-inline 类：

.ant-menu-dark.ant-menu-inline {
    min-height: 100vh; 
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

我还会在最后一个菜单项的底部添加一个边距，否则它将停留在屏幕的最底角：

.ant-menu-dark.ant-menu-inline .ant-menu-item:last-child {
    margin-bottom: 40px;
}

这就是现在的样子：

【讨论】：

【解决方案3】：

您可以添加具有绝对位置的自定义 css，然后设置底部 = 0

对我来说，我想在侧边栏的末尾添加一个徽标，所以我这样做了

<Menu.Item
    title=""
    style={{
        position: 'absolute',
        bottom: 0,
        zIndex: 1,
        transition: 'all 0.2s',
    }}
    key="6"
>
    LOGO
</Menu.Item>

注意：我建议您不要直接更改 antd css，除非绝对必要。

【讨论】：