固定在页面顶部的Bootstrap3导航栏阻止了该栏下方页面的顶部内容，我该如何解决？

Question

在下面的图像中，您将看到我的导航栏在页面顶部，但是它稍微覆盖了应该位于其下方的标题。我该如何解决？

我的导航栏代码：

    <nav class="navbar navbar-default navbar-fixed-top">
 <div class="container-fluid">
   <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data- 
 toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="userProfile1">
     <img alt="Brand"">
  </a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">

    <li><a href="userProfile1">Profile</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu <span class="caret"></span></a>
      <ul class="dropdown-menu">
      </ul>
    </li>
  </ul>

  <ul class="nav navbar-nav navbar-right">
    <li><a href="/logout">Logout</a></li>

  </ul>
</div><!-- /.navbar-collapse -->

我将以下内容添加到我的CSS文件中，但它没有任何改变：

 body {
   padding-top: 60px;
}
 @media (max-width: 979px) {
   body {
     padding-top: 0px;
   }
}

Answer 1

您总是可以给标题添加DIV标签，并为该div留一个页边距。

CSS：

.heading-text {
    margin-top: 100px;
}

HTML：

<div class="heading-text">
    <h1>My Title</h1>
</div>