Bootstrap navbar-fixed-top无效

Question

我正在尝试在页面顶部创建一个带有固定导航栏的页面。我需要的是this之类的东西。

正如我们在上面的链接页面中看到的那样，页面内容在优先使用导航栏后开始。但就我而言，内容从页面开头就开始了。这就像导航栏放在其他内容之上。

您可以看到JsFiddle演示here。

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

这是我的导航栏和另一个已经放在页面正文部分内的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>

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

Answer 1

在Bootstrap模板中，他们有这个css代码

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

此代码用于 theme.css 文件，该文件未包含在您的HTML中。

您可以通过在CSS代码中仅添加上述代码来解决此问题

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

Answer 2

添加CSS：

body {
    padding-top: 70px;
}

你可以通过检查这里的元素来看到这一点。它确实存在于css中。 https://getbootstrap.com/examples/navbar-fixed-top/