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 ~~~~~~~~~~~~~~~~~~ | | ________________________________________________________ |
如果您的导航栏已修复。您可以在身体的顶部和底部添加边距。
<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>
保证金顶部是顶部导航的高度,保证金底部是底部导航的高度。
您还可以为身体添加边距。 – AdhershMNair
但这不是响应,是吗? – mfaorlkzus
我认为它的权利,如果navbars有一个固定的高度。如果不是,您可以使用@media()css进行更改。 – AdhershMNair