将Menu.Item与Sider内部的底部对齐
将Menu.Item与Sider内部的底部对齐
提问于 2020-01-29 23:27:22
我在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>回答 3
Stack Overflow用户
发布于 2021-05-14 20:35:01
您可以添加具有绝对位置的自定义css，然后设置bottom =0
对我来说，我想在侧边栏的末尾添加一个徽标，所以我这样做了
<Menu.Item
title=""
style={{
position: 'absolute',
bottom: 0,
zIndex: 1,
transition: 'all 0.2s',
}}
key="6"
>
LOGO
</Menu.Item>注意：我建议你不要直接更改antd css，除非绝对必要。
Stack Overflow用户
发布于 2020-01-30 00:09:12
在chrome或您正在使用的任何浏览器中检查元素(Crtl+Shift+I)。
查找用于Menu的css类。
如果css尚未使用，请将其更新为使用display:flex。
然后添加样式flex-direction:column。
之后，对于第一个Menu.type，添加样式margin-top: auto。
您应该在React中有一个全局css文件，您可以在其中覆盖Ant Design中的css。
Stack Overflow用户
发布于 2020-02-11 06:56:10
如果您更改Antd库中的样式，则可以将Menu.Items与边框底部对齐。您可以随时检查需要在Chrome Dev工具中更改哪些类(它们都以.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;
}现在看起来是这样的：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59970334
复制相关文章
相似问题
腾讯云开发者
