bootstrap 创建页脚实用程序,始终位于页面底部和内容之后,

qzlgjiam  于 2个月前  发布在  Bootstrap
关注(0)|答案(3)|浏览(42)

先决条件

建议

我希望有一个类似于 sticky-footer 的实用程序,具有略有不同的行为,如此处所述:https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/

如果目前已经有方法可以实现这一点,那么很抱歉我没有发现。
如果无法将其总结为一个单一的实用程序,也许提供一个具有这种行为的示例也会有所帮助。

动机和背景

这种页脚行为对我来说是可取的。

zd287kbt

zd287kbt1#

我认为绝对定位页脚像这样绝对不是实现"粘性"页脚的现代方法。你可以使用flexbox/grid来达到相同的效果。
例如,通过Bootstrap的辅助类:

<body class="min-vh-100 vstack">

  <header>
    this is the header
  </header>

  <main class="flex-grow-1">
    main content area
  </main>

  <footer>
    footer goes here
  </footer>

</body>
jxct1oxe

jxct1oxe2#

非常感谢,这个对我来说效果非常好!可能需要在这里提一个待办事项,就是在文档中添加一个示例,但我会把它留给你们。

mspsb9vt

mspsb9vt3#

是的@GregJohnStewart,请让它打开,这样我们就可以考虑将其作为示例添加。顺便说一下,感谢这个想法。

相关问题