使用Bootstrap 3使页脚固定在底部

替罪羊

我在这方面缺少什么吗?我觉得我已经浏览了几次他们的站点文档,却没有在页脚上找到任何东西。

我只是希望有一个规则的反色页脚,即使没有任何内容可以固定在屏幕的最底部。当内容长于屏幕高度时,它将把它向下推到底部。

现在我有这个:

<div class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="navbar-inner">
    <div class="container">
      <span>testing</span>
    </div>
  </div>
</div>

但是每次屏幕分辨率下降980px到页脚下方时,都会跳到屏幕的顶部。我没有使用Bootstrap进行过很多工作,这似乎是他们应该考虑的问题,并且我可能在这里缺少一些关键的问题。谁能解释这个原因?

雨果·耶茨

这适用于Bootstrap 3.3.1

<div class="container">
    [...]
</div>
<footer class="footer">
  <div class="container">
    <p class="text-muted">my footer</p>
  </div>
</footer>

确保页脚标签在containerdiv之外

你需要的粘性footer.css太是这里

编辑:

要执行您在评论中的要求,您是否尝试过?

<footer class="footer">
    <div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="navbar-inner">
            <div class="container">
                <span>testing</span>
            </div>
        </div>
    </div>
</footer>

另外,您还需要调整CSS类.footer

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* height: 60px; */
    background-color: #f5f5f5;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用“ position:absolute”将页脚固定在div的底部?

来自分类Dev

如何使用绝对位置将页脚固定在底部?

来自分类Dev

Bootstrap中的页脚,该页脚随内容扩展或固定在底部

来自分类Dev

Bootstrap Navbar固定的底部粘页脚

来自分类Dev

如何使页脚固定在底部?

来自分类Dev

不要将页脚固定在底部

来自分类Dev

页脚未固定在页面底部

来自分类Dev

用tailwindCSS将页脚固定在底部

来自分类Dev

使用Bootstrap创建固定的页脚

来自分类Dev

使用 bootstrap/jQuery 固定视口中的页脚

来自分类Dev

缩小时无法将页脚固定在屏幕底部

来自分类Dev

为什么我的页脚没有固定在页面底部?

来自分类Dev

Bootstrap导航栏底部固定在平板电脑上的屏幕键盘上移动

来自分类常见问题

Bootstrap中的固定页脚

来自分类Dev

Bootstrap 3固定页脚CSS导致Internet Explorer滚动错误

来自分类Dev

在Bootstrap 3中制作可扩展的固定页脚?

来自分类Dev

如何在不使用 Flutter 底部导航栏的情况下显示固定在屏幕底部的容器?

来自分类Dev

Div,固定在底部,固定在顶部

来自分类Dev

Bootstrap使用非官方的Bootstrap Modal修改后,模态页脚底部的多余空间

来自分类Dev

Android页脚固定在底部,将位于其他视图之上

来自分类Dev

根据高度将网站页脚固定在页面底部还是下方?

来自分类Dev

如何使STICKY表单内的页眉和页脚(即分别固定在表单的顶部和底部)?

来自分类Dev

使元素固定在屏幕底部

来自分类Dev

Bootstrap 3“流体”页脚

来自分类Dev

使用Bootstrap 3,页脚未以全页显示

来自分类Dev

如何使用Bootstrap v3推翻我的页脚的高度

来自分类Dev

使用 Bootstrap 4 将版权页脚定位到 Angular/C# 应用程序的底部

来自分类Dev

在Bootstrap 3中将嵌套行固定/对齐到其父列的底部

来自分类Dev

我如何始终将我的html元素固定在父元素的底部,我正在使用overflow:hidden并隐式地将高度赋予父元素?

Related 相关文章

  1. 1

    如何使用“ position:absolute”将页脚固定在div的底部?

  2. 2

    如何使用绝对位置将页脚固定在底部?

  3. 3

    Bootstrap中的页脚,该页脚随内容扩展或固定在底部

  4. 4

    Bootstrap Navbar固定的底部粘页脚

  5. 5

    如何使页脚固定在底部?

  6. 6

    不要将页脚固定在底部

  7. 7

    页脚未固定在页面底部

  8. 8

    用tailwindCSS将页脚固定在底部

  9. 9

    使用Bootstrap创建固定的页脚

  10. 10

    使用 bootstrap/jQuery 固定视口中的页脚

  11. 11

    缩小时无法将页脚固定在屏幕底部

  12. 12

    为什么我的页脚没有固定在页面底部?

  13. 13

    Bootstrap导航栏底部固定在平板电脑上的屏幕键盘上移动

  14. 14

    Bootstrap中的固定页脚

  15. 15

    Bootstrap 3固定页脚CSS导致Internet Explorer滚动错误

  16. 16

    在Bootstrap 3中制作可扩展的固定页脚?

  17. 17

    如何在不使用 Flutter 底部导航栏的情况下显示固定在屏幕底部的容器?

  18. 18

    Div,固定在底部,固定在顶部

  19. 19

    Bootstrap使用非官方的Bootstrap Modal修改后,模态页脚底部的多余空间

  20. 20

    Android页脚固定在底部,将位于其他视图之上

  21. 21

    根据高度将网站页脚固定在页面底部还是下方?

  22. 22

    如何使STICKY表单内的页眉和页脚(即分别固定在表单的顶部和底部)?

  23. 23

    使元素固定在屏幕底部

  24. 24

    Bootstrap 3“流体”页脚

  25. 25

    使用Bootstrap 3,页脚未以全页显示

  26. 26

    如何使用Bootstrap v3推翻我的页脚的高度

  27. 27

    使用 Bootstrap 4 将版权页脚定位到 Angular/C# 应用程序的底部

  28. 28

    在Bootstrap 3中将嵌套行固定/对齐到其父列的底部

  29. 29

    我如何始终将我的html元素固定在父元素的底部,我正在使用overflow:hidden并隐式地将高度赋予父元素?

热门标签

归档