Bootstrap全宽页脚，不固定

Question

我有一个创建全宽页脚的要求。但它不应该固定在屏幕上。它应该只有在滚动到页面底部时才可见。

使用navbar-fixed-bottom将使页脚完全变宽，但它也会将其固定在屏幕上。

<nav class="navbar navbar-default navbar-fixed-bottom" id="footer_nav">
            <div class="container-fluid footer_c">
                <ul class="nav navbar-nav">
                    <li><a  style="color:#4b4b4b;  font-size:0.9em;" href="/ContactUs.aspx">Contact us</a></li>
                </ul>
            </div></nav>

有人能教我怎么做吗？

Answer 1

我不认为bootstrap会给你提供非固定的脚注。您可以在css中使用simple Row类或覆盖footer类

HTML

<footer>
  <div class="container-fluid footer_c">
    <ul class="nav navbar-nav">
      <li><a style="color:#4b4b4b;  font-size:0.9em;" href="/ContactUs.aspx">Contact us</a></li>
    </ul>
  </div>
</footer>

CSS

footer{
  width:100%;
  height:20%; //your desired height
  position:absolute;
  bottom:0;
  left:0;
  background-color:green;
}

CodePen：http://codepen.io/anon/pen/KgqWaV

Answer 2

通常，bootstrap页脚在类中将具有position: fixed样式。这就是在屏幕底部放置页脚的原因。您需要做的是通过向页脚添加样式position: relative;来覆盖页脚的位置。这将在页面结束处的底部生成页脚。

只需在您的css中添加此样式

.navbar-fixed-bottom, .navbar-fixed-top {
   position: relative;
}

Answer 3

与具有固定宽度(值取决于屏幕/窗口的大小)的.container类不同，.container-fluid类将提供full width属性。

<footer class="container-fluid">
</footer>