Bootstrap全宽页脚没有修复

我有创建全宽页脚的需求。但它不应该固定在屏幕上。只有当您滚动到页面底部时，它才会显示。Bootstrap全宽页脚没有修复

使用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>

有人可以让我怎么做。

来源

2016-09-28 Anshu

你的HTML代码在哪里？ –

更新了问题 – Anshu

我不认为bootstrap会给你非固定的页脚。您可以使用简单的行类或重写CSS页脚类

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

来源

2016-09-28 06:00:22

一般来说引导页脚将有position: fixed风格在课堂上。这就是在页面底部粘贴页脚的原因。您需要做的是通过在页脚中添加样式position: relative;来覆盖页脚的位置。这将使页脚结束页面的底部。

就在你的CSS

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

来源

2016-09-28 06:00:43 Nitheesh

它使页脚消失，在一个较小的屏幕 – Anshu

请检查您是否有任何媒体查询页脚。一般来说，上述线条不会隐藏较小设备中的页脚。 – Nitheesh

不像.container类具有固定的宽度（该值取决于屏幕/窗口的大小），类.container-fluid会给全宽属性添加这种风格。

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

来源

2016-09-28 06:01:14 1GR3

Bootstrap全宽页脚没有修复

回答

相关问题