固定顶部导航栏（bootstrap）下面的内容

Question

这是一小段HTML代码：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="collapse navbar-collapse" id="div1">
        <ul class="nav navbar-nav">
          <li>
            <a href="#" class="navbar-brand">site</a>
          </li>
          <li>
            <a href="#">link1</a>
          </li>
          <li>
            <a href="#">link2</a>
          </li>
          <li>
            <a href="#">link3</a>
          </li>
          <li>
            <a href="#">link4</a>
          </li>
          <li>
            <a href="#">link5</a>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="#">Logoff</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="container">
    <div class="row">
    <h1>Hello, world!</h1>
  </div>
  </div> 

固定顶部导航栏位于hello，world的顶部，如图所示。

如果我只使用导航栏和导航栏默认类，那么＆＃34;你好，世界＆＃34;会正常显示。我怎样才能使它正常显示？

Answer 1

.navbar-fixed-*个类会生成导航栏fixed，即在您滚动时它会与您的页面一起移动。这种类型的定位使其脱离了文档的流程，这就是为什么页面的其余部分表现得像它不存在的那样。

要解决您的问题，您应该在页面顶部添加一些填充：

body {
  padding-top: 70px;
}

正如Bootstrap的docs所述。