title: About Bootstrap 4 - Navbar top placement
body: <p>I am using Bootstrap 4.<br>
  I have a question about the Navbar "Fixed top" class. <a href="http://v4-alpha.getbootstrap.com/components/navbar/#placement" rel="nofollow noreferrer">http://v4-alpha.getbootstrap.com/components/navbar/#placement</a><br>
  The Navbar "Fixed top" class covers content.    </p>
  
  <p>like this demo below, the Navbar covers <code>&lt;div class="jumbotron"&gt;</code>,I want the Navbar to not cover it, what should I do? </p>
  
  <p>I have no idea how to prevent the Navbar from covering content, because the device's size is visible.  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;
  
      &lt;link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="https://cdn.bootcss.com/tether/1.3.2/css/tether.min.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;nav class="navbar navbar-fixed-top navbar-light bg-faded"&gt;
      &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt;
      &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="nav-item active"&gt;
              &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;form class="form-inline pull-xs-right"&gt;
          &lt;input class="form-control" type="text" placeholder="Search"&gt;
          &lt;button class="btn btn-success-outline" type="submit"&gt;Search&lt;/button&gt;
      &lt;/form&gt;
  &lt;/nav&gt;
  &lt;div class="jumbotron"&gt;
      &lt;h1 class="display-3"&gt;Hello, world!&lt;/h1&gt;
      &lt;p class="lead"&gt;This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.&lt;/p&gt;
      &lt;hr class="m-y-2"&gt;
      &lt;p&gt;It uses utility classes for typography and spacing to space content out within the larger container.&lt;/p&gt;
      &lt;p class="lead"&gt;
          &lt;a class="btn btn-primary btn-lg" href="#" role="button"&gt;Learn more&lt;/a&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.bootcss.com/tether/1.3.2/js/tether.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>