我正在使用Vali Admin主题,并且试图将左侧边栏中的最后一个列表项推到底部。
我以前几乎没有使用过flexbox,所以我一点都不熟悉它,但是我将菜单更改为display: flex
,然后按照this answer尝试将最后一项推到底部。我正在尝试精确地该问题中的人在之后的事情。
这些是我对主题的修改:
.app-menu {
@extend .app-menu;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-start;
li:last-of-type {
margin-top: auto;
}
}
工作fiddle。
我认为问题在于菜单使用的高度不够。
我很乐意包含一个工作片段,但出于对我的爱,我不知道如何创建jsfiddle。它不允许本地文件,它将阻止我的要旨。与Codepen相同。
答案 0 :(得分:2)
在.app-sidebar
上添加以下内容:
display: flex; // make sidebar a flexbox
flex-direction: column; // so it will align column direction
我们做了以上操作,所以我们可以在孩子身上应用与flex相关的样式。
这将使父级或侧边栏成为flexbox,然后在.app-menu
上添加以下内容
flex: 1; // this will take all the remaining space on the sidebar
并删除padding-bottom
上的.app-menu
,以便最后一项保留在底部而没有填充。
答案 1 :(得分:0)
按照随附的链接中所述进行操作是正确的。
但是您没有为ul
设置100%的高度。
将height: 100%;
设置为.app-menu
类可以解决您的问题。
这是基于您的代码的工作示例:
答案 2 :(得分:0)
尝试
.app-menu {
margin-bottom: 0;
padding-bottom: 40px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-start;
height: 100%;
如果最后一项需要显示在页面底部。尝试通过将height:100%设置为ul