tac*_*lux 7 css css3 flexbox twitter-bootstrap
我正在尝试使用这个粘性页脚:
http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content{
flex: 1;
}
但它在<768px宽度处弄乱了渲染.
任何简单的CSS修复,以使其适用于所有分辨率？
Bootstrap 4现在默认使用flexbox,因此更容易获得一个粘性(非固定)页脚,而不需要额外的CSS for flexbox.你只需要确保身体min-height......
body {
min-height: 100vh;
}
然后使用flexbox实用程序类......
<body class="d-flex flex-column">
<nav></nav>
<main class="flex-grow"></main>
</footer></footer>
</body>
Bootstrap 4 Flexbox Sticky Footer
你需要给那么Flexbox项width的100%.
在这种情况下,那将是该.content元素:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content {
flex: 1;
}
@media only screen and (max-width: 768px) {
.content {
width: 100%;
}
}
| 归档时间： |
|
| 查看次数： |
5341 次 |
| 最近记录： |