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中使用简单的Row类或覆盖页脚类

<强> 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将给出全宽度属性。

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

Bootstrap全宽页脚没有固定

3 个答案: