Question

我有一个带有两个div用于导航的Bootstrap页面，一个是导航栏固定顶部，另一个是导航栏固定底部。因此，导航栏会粘在顶部/底部。

现在我想声明一个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>

.________________________________________________________。 | ~~~~~~~~~~~~~~~~~~~导航栏固定顶~~~~~~~~~~~~~~~~~~~ | | ________________________________________________________ | | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | | ________________________________________________________ | | ~~~~~~~~~~~~~~~~~导航栏固定底~~~~~~~~~~~~~~~~~~ | | ________________________________________________________ |

Answer 1

如果您的导航栏已修复。你可以在身体的顶部和底部添加边距。

<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>

保证金顶部是顶部导航的高度，保证金底部是底部导航的高度。

Bootstrap：在navbar-fixed-top和navbar-fixed-bottom之间创建一个动态div

1 个答案: