flexbox布局中的小屏幕不可见页脚
[英]Invisible footer on the small screen in flexbox layout
问题描述
更改页面宽度后，页脚消失了。
我希望我的页面在减小宽度后显示在列中。 我的页脚不在容器中，因为当我将其设置到容器时，它位于容器中第四个元素的右侧。 我不知道如何放入正确的位置（页面底部）。
代码
.container > *{
padding: 10px;
flex: 1
}
.container{
display: flex;
height: 400px;
}
@media screen and (max-width: 800px) {
.container{
flex-direction: column;
}
}
<div class="header">
</div>
<div class="container">
<div class="lol first">
<div class="list">
</div>
</div>
<div class="lol second">
</div>
<div class="lol third">
</div>
<div class="lol fourth">
</div>
</div>
<div class="footer">
</div>
</div>
1 条回复
1楼 Joe Fitzsimmons 0 2019-09-18 21:19:10
你可以把 height on.lol 而不是容器：
.container{
display: flex;
flex-wrap: ;
}
.lol {
height: 400px;
}
问题未解决？试试以下方法：
使用 Bootstrap 4 在小型设备上的页脚布局、响应性和隐藏
[英]Footer layout, responsiveness and hiding on small devices with Bootstrap 4
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.