使用导航栏引导静态页脚[重复]

Posted 2023-03-21

【中文标题】使用导航栏引导静态页脚[重复]

【英文标题】：Bootstrap static footer using navbar [duplicate]

【发布时间】：2017-08-20 17:25:01

【问题描述】：

我使用以下代码使用Bootstrap 创建页脚：

<nav class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
        <div class="navbar-header">
            <span class="navbar-brand">Ok Bye</span>
        </div>

        <p class="navbar-text navbar-right">company &copy; 2017</p>
    </div>
</nav>

我想要一个静态的footer 在页面底部，而不是在viewport 中一直可见。 Bootstrap 的实现方式是什么？

【问题讨论】：

我认为你遗漏了一些东西。 nav 用于导航而不是页脚。请正确更正您的代码。这可能会有所帮助：getbootstrap.com/examples/sticky-footer

【参考方案1】：

静态页脚在 Bootstrap 中有一个实现。你不需要使用<nav>

CSS：

/* Sticky footer styles
-------------------------------------------------- */
.footer 
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;

HTML：

<footer class="footer">
  <div class="container">
    ...
  </div>
</footer>