Bootstrap：在導航欄固定頂部和導航欄固定底部之間創建一個動態div

我有一個用於導航的兩個div的引導頁面，一個是導航欄固定頂部，另一個是導航欄固定底部。所以，navbars堅持頂部/底部。Bootstrap：在導航欄固定頂部和導航欄固定底部之間創建一個動態div

現在我想聲明一個div，即兩個導航欄之間的空格（草圖中的xxxxxx）。關於如何實現這個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>

.________________________________________________________。 | ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ | ~~~~~~~~~~ navi-fixed-top ~~~~~~~~~~~~~~~~~~~ | | ________________________________________________________ | | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | | ________________________________________________________ | | ~~~~~~~~~~~~~~~~~ navbar-fixed-bottom ~~~~~~~~~~~~~~~~~~ | | ________________________________________________________ |

來源

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

Bootstrap：在導航欄固定頂部和導航欄固定底部之間創建一個動態div

回答

相關問題