Correct way to add padding to Bootstrap body to prevent content and header overlap

Yes your solution is acceptable.

So if you have the combined one or the two Bootstrap files in the beginning and you would like to have the navigation bar, this is the way to avoid the big padding when on smaller screens:

<link href="https://stackoverflow.com/questions/14842079/css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<style>
  body {
    padding-top: 60px;
  }
  @media (max-width: 980px) {
    body {
      padding-top: 0;
    }
  }
</style>