Css 引导导航栏固定顶部不工作

我正在尝试创建一个页面，页面顶部有一个固定的导航栏。我需要的是这样的东西

正如我们在上面链接的页面中所看到的，页面的内容在优先考虑导航栏之后开始。但在我的例子中，内容从页面的开始就开始了。这就像导航栏被放置在其他内容的顶部一样

您可以看到JSFIDLE演示

在演示页面中，我没有添加任何新内容。它包含本问题前面链接的页面的来源

这是我的导航栏和另一个div，它们被放在页面的主体部分

<!-- Fixed navbar -->
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          .......
        </button>
        <a class="navbar-brand" href="#">Bootstrap theme</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              .......
            </ul>
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>

  <div class="container theme-showcase" role="main">
  .....
  </div>

.......






.......



.....

为什么我不能根据需要查看我的页面。我的代码中有什么遗漏吗

添加CSS:

body {
    padding-top: 70px;
}

您可以通过检查此处的元素看到这一点。它确实存在于css中。

---

在引导模板中，他们有以下css代码

body {
    padding-top: 70px;
    padding-bottom: 30px;
}

这段代码用于theme.css文件中，该文件未包含在html中

您可以通过在CSS代码中只添加上面的代码来解决这个问题

---

或者你可以在你的HTML代码中链接到theme.css文件

在HTML中没有任何问题，你必须添加一些css属性，比如

填充

，

边距

，

位置

是的，我刚刚意识到了这一点。我认为我的导航栏有问题。事实上，我误解了导航栏的概念。我认为它在正文的顶部为自己分配了一些空间，甚至在滚动的时候也一直在页面的顶部。非常感谢。我想这和导航栏有关。