twitter-bootstrap 使用导航栏引导静态页脚

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/43055979/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-22 00:43:31  来源:igfitidea点击:

Bootstrap static footer using navbar

htmlcsstwitter-bootstrapfooter

提问by raul

I use the following code to create a footer using Bootstrap:

我使用以下代码创建页脚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>

I want a static footerat the bottom of the page, not one that is visible all the time in the viewport. What is the Bootstrapway to achieve this?

我想要footer页面底部的静态,而不是在viewport. Bootstrap实现这一目标的方法是什么?

回答by Yash Gupta

The static footer has an implementation in Bootstrap. You don't need to use <nav>

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

CSS:

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:

HTML:

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