如何在Bootstrap中添加詞綴固定底部導航欄

Question

首先，請注意，我已經知道，我們可以在Bootstrap中添加affix實用程序到所有類型的常規navbar，但在我的情況下，我需要添加詞綴到具體navbar-fixed-bottom導航欄。

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-inverse navbar-fixed-bottom"> 
 
    <div class="container"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 
    
 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a></li> 
 
     <li><a href="#">Link</a></li> 
 
     <li><a href="#">Link</a></li> 
 
     <li><a href="#">Link</a></li> 
 
     <li><a href="#">Link</a></li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container --> 
 
</nav> 
 
<div class="container" style="height:3000px;"></div>

，我想這樣做是在頁面加載和滾動呈現在導航欄中的viewport底部的振振有辭下來它貼在上面。

你能告訴我這是否可行嗎？

Answer 1

當您應用affix時，您需要添加CSS來處理導航欄。在你的情況下，這將改變導航欄top:0;，以便它不再固定在底部。

.affix.navbar-fixed-bottom { 
    top: 0; 
    height: 50px; 
} 

https://www.codeply.com/go/jYikJAul9j