2016-06-13 79 views
0

我使用Bootstrap 3.3.5在頁面底部使用.navbar navbar-default類顯示頁腳。在顯示大於10的項目列表的頁面上,頁腳在頁面底部正確顯示,但在頁面少於5項的頁面上,則頁面中間顯示頁腳而不是底部。Bootstrap Footer not堅持頁面底部

HTML代碼 ..

<nav class="navbar navbar-default" style="margin-bottom:0px;padding-botton:0px"> 
      <div class="container-fluid"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbarBottom"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span>       
       </button> 
       <div class="collapse navbar-collapse" id="myNavbarBottom"> 
        <ul class="nav navbar-nav navbar-center"> 
         <li><a href="https://www.linkA.com"><span class="glyphicon glyphicon-th-large"></span> About</a></li> 
         <li><a href="https://www.linkB.com"><span class="glyphicon glyphicon-pencil"></span> Blog</a></li> 
         <li><a href="https://www.linkC.com"><span class="glyphicon glyphicon-road"></span> How It Works</a></li> 
         <li><a href="https://www.linkD.com"><span class="glyphicon glyphicon-certificate"></span> Credits</a></li> 
         <li><a href="https://www.linkE.com"><span class="glyphicon glyphicon-earphone"></span> Contact</a></li> 
         <li><a href="https://www.linkF.com" target="_blank"><span class="glyphicon glyphicon-comment"></span><b style="color:blue;"> Survey</b></a></li> 
        </ul> 
       </div> 
      </div> 
     </nav> 

改變導航欄下課後到「導航欄導航欄默認導航欄固定底」頁腳固定在頁面的bootom,但我不能向下滾動到列表的最後一項。請幫助..

+0

你發佈的例子似乎工作正常,如果y你應該使用任何其他的CSS/JS你應該發佈它。 – vanburen

+0

您必須設置項目列表中的「min-height」,才能解決您的問題。 – Amit

回答

0

嘗試......

.navbar{ 
    position:absolute; 
    bottom:0; 
    width:100%; 
} 
0

確定,所以,如果你想頁腳粘在滾動

然後

.navbar 
{ 
position: fixed; 
bottom: 0; 
width: 100%; 
} 

,如果你只是想頁腳

.navbar 
    { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    }