Правильный способ добавления дополнения к телу Bootstrap для предотвращения совпадения содержимого и заголовка

Я понимаю, что для остановки основного контейнера в Bootstrap, находящегося в верхней части тела, и за панель навигации, вы должны добавить дополнение следующим образом:

<link href="css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

Заполнение должно быть объявлено между bootstrap.css и bootstrap-responsive.css, чтобы дополнение не вызывало проблемы на более мелких устройствах и тем самым нарушало отзывчивость сайта.

Мой вопрос:

Я использую файл combinde bootstrap.css, загруженный из Bootstrap customize, который имеет отзывчивый и обычный css, объединенный в один файл,

Поскольку они объединены в один файл, это означает, что я не могу использовать решение, которое я описал в начале этого вопроса, без добавления исправления в файл bootstrap.css(я не хочу добавлять его туда, длинный рассказ).

Итак, я думал вместо этого кода (с исправлением @media для небольших устройств):

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

в мой собственный файл css (main.css) и включив его после bootstrap.css в html, например:

<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/main.css" rel="stylesheet" media="screen">

Как вы думаете, это решение приемлемо?

Ответ 1

Да, ваше решение приемлемо.

Итак, если у вас есть комбинированный или два файла Bootstrap в начале, и вы хотели бы иметь панель навигации, это способ избежать большого заполнения, когда на меньших экранах:

<link href="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>

Ответ 2

В Bootstrap 2.3.x мы можем исправить это дополнение с помощью CSS:

body > .container {
  padding-top: 40px;
  background-color: white;
}

/*
 * Responsive stypes
 */
@media (max-width: 980px) {

  body > .container {
    padding-top: 0;
  }
  .navbar-fixed-top {
    margin-bottom: 0;
  }

} /* END: @media (max-width: 980px) */

с файлом HTML выглядят следующим образом

<html>
<body>

  <div class="navbar navbar-fixed-top">
   ...
  </div>

  <div class="container">
   ...
  </div>

</body>
</html>

В Twitter файле CSS для CSS верхняя строка меню имеет class="navbar-fixed-top" с margin-bottom: 20px;, когда ширина экрана меньше, чем 980px.

Надеюсь, что это может помочь кому-то.