gpt4 book ai didi

css - 在 Bootstrap 中使用 flexbox 粘性页脚

转载 作者:技术小花猫 更新时间:2023-10-29 11:06:45 24 4
gpt4 key购买 nike

我正在尝试使用这个粘性页脚:

http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

body{
display: flex;
min-height: 100vh;
flex-direction: column;
}

.content{
flex: 1;
}

但它会扰乱 < 768px 宽度的渲染。

任何简单的 css 修复使其适用于所有分辨率?

http://jsfiddle.net/2xvv5mod/

最佳答案

Bootstrap 4 现在默认使用 flexbox,因此无需为 flexbox 添加额外的 CSS 即可更轻松地获得粘性(非固定)页脚。你只需要确保 body 有 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

关于css - 在 Bootstrap 中使用 flexbox 粘性页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28389667/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com