ブートストラップ：navbar-fixed-topとnavbar-fixed-bottomの間で動的divを作成する

私はナビゲーション用に2つのdivを持つBootstrapページを持っています.1つはnavbar-fixed-topで、もう1つはnavbar-fixed-bottomです。したがって、ナビゲーションバーは上部/下部に固執します。ブートストラップ：navbar-fixed-topとnavbar-fixed-bottomの間で動的divを作成する

ここでは、2つのナビゲーションバー（スケッチ内のxxxxxx）の間のスペースであるdivを宣言したいと思います。このdivをどのように実装するかに関する提案はありますか？

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    .. 
    </div> 
</div> 

[DIV FOR THE REST OF THE PAGE] 

<div class="navbar navbar-inverse navbar-fixed-bottom"> 
    <div class="container"> 
    .. 
    </div> 
</div>

。 | ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ | ________________________________________________________ | | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | | ________________________________________________________ | | ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ | ________________________________________________________ |

出典

2017-05-26 mfaorlkzus

ナバーバーが修正されている場合。体の上と下に余白を追加することができます。

<html>  
<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
       <div class="container"> 
       .. 
       </div> 
      </div> 


      [DIV FOR THE REST OF THE PAGE] 


      <div class="navbar navbar-inverse navbar-fixed-bottom"> 
       <div class="container"> 
       .. 
       </div> 
      </div> 
     <style> 
      body{ 
       margin-top: 100px; 
       margin-bottom: 100px; 
      } 
     </style> 
    </body> 
</html>

マージントップはトップナビの高さで、マージンボトムはボトムナビの高さです。

出典

2017-05-26 12:31:15 AdhershMNair

また、本文にマージンを追加することもできます。 – AdhershMNair

しかしそれは反応的ではありませんか？ – mfaorlkzus

私はそれが正しいと思う、もしnavbarsが固定された高さを持っていれば。そうでない場合は、@ media（）cssを使用して変更できます。 – AdhershMNair

ブートストラップ：navbar-fixed-topとnavbar-fixed-bottomの間で動的divを作成する

答えて

関連する問題