Wordpress 4.3 和 Bootstrap 3.x - 为什么我的容器重叠？

Question

我正在开发一个包含 Bootstrap 的 Wordpress 主题。由于某种未知原因，我的导航栏与页面顶部的文本重叠。就像导航栏悬停在网页上一样。

我尝试添加“行”并指定 12 宽度，但这似乎不起作用。

这是导航栏的 HTML：

<!-- NAVIGATION
==================================================================== -->

<div class="navbar-wrapper">
    <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">  
      <div class="container">

          <!-- left side of navbar -->
          <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-
                  toggle="collapse" data-target=".navbar-collapse" 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="/">BRAND</a>
          </div> <!-- end navbar-header -->

          <!-- right side of navbar -->
          <div class="navbar-collapse collapse">
              <ul class="nav navbar-nav navbar-right">
                  <li id="menu-item-216" class="menu-item menu-item-type-
post_type menu-item-object-page menu-item-home menu-item-216"><a 
href="http://www.example.com/">Home</a></li>
<li id="menu-item-205" class="menu-item menu-item-type-post_type menu-item-
object-page current-menu-item page_item page-item-203 current_page_item 
menu-item-205"><a href="http://www.example.com/about-us/">About Us</a></li>
<li id="menu-item-219" class="menu-item menu-item-type-post_type menu-item-
object-page menu-item-219"><a href="http://www.example.com/faq/">FAQ</a>
</li>
<li id="menu-item-239" class="menu-item menu-item-type-post_type menu-item-
object-page menu-item-239"><a href="http://www.example.com/blog/">Blog</a>
</li>
              </ul>
          </div>
      </div> <!-- end of container -->
    </nav> <!-- end of navbar -->
</div> <!-- end of navbar-wrapper -->

页面的下一部分如下所示。上面的导航栏实际上与“关于我们”重叠。

<div class="container">
     <h1>About Us</h1>
    <p>A bunch of text goes here</p> 
</div>

非常感谢任何帮助。

Answer 1

我相信我已经解决了。我想保留导航栏固定顶部。为了解决上述问题，我在我的 css 中添加了以下内容：

body {
    margin-top: 50px;
}