ブートストラップ4スティッキー下のナビゲーションバー

Question

私の現在のナビゲーションバーには、次のとおりです。それを「プッシュ」するのに十分なコンテンツが存在しない場合でも、それが一番下になるように、

<nav class="navbar navbar-inverse"> 
      <div class="container"> 
        <ul class="nav navbar-nav"> 
         <li><a href="">page 1</a></li> 
         <li><a href="">page 2</a></li> 
         <li><a href="">page 3</a></li> 
        </ul> 
      </div> 
</nav> 

は、どのように私はそれを作るのですか？ navbar-fixed-bottomは、コンテンツが下部に達すると重複するため機能しません。

Answer 1

「固定」とは、下にない他の要素の前にあります。あなたのページの一番下にいくつかの空白行を置くか、より良い方法で、ページコンテナにCSS padding-bottomを追加してください。ここで

は、あなたが望むものにパディング値を調整し、一例である：

.page-container { 
 
    padding-bottom: 200px; 
 
}

<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<nav class="navbar navbar-inverse navbar-fixed-bottom"> 
 
    <div class="container"> 
 
    <ul class="nav navbar-nav"> 
 
     <li><a href="">page 1</a></li> 
 
     <li><a href="">page 2</a></li> 
 
     <li><a href="">page 3</a></li> 
 
    </ul> 
 
    </div> 
 
</nav> 
 
<div class="page-container"> 
 
    <p>first line</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>last line</p> 
 
</div>