Twitter Bootstrap Отзывчивый Navbar Broken на маленьких экранах

Я читал документы и сравнивал свой код с примерами Bootstrap, но я не могу понять, почему navbar на моем сайте падает примерно на 100 пикселей, когда я уменьшаю окно браузера или просматриваю его на телефоне.

http://warm-ocean-8133.herokuapp.com/

Вот мой html в формате jade-шаблона.

.navbar.navbar-fixed-top
  .navbar-inner
    .container
      a.btn.btn-navbar(data-toggle="collapse",data-target=".nav-collapse")
        span.icon-bar
        span.icon-bar
        span.icon-bar
      a.brand(href='#home') Miles Matthias
      .nav-collapse
        ul.nav
          li.active
            a(href='#home') Home
          li
            a(href='#contact') Contact

Ответы

Ответ 1

Визуальная аномалия появляется, потому что вы определили верхнее дополнение для элемента body после включения файла bootstrap-responsive.css, что означает, что "отзывчивые" стили не могут переопределить ваше дополнение:

<link href="/stylesheets/bootstrap.css" rel="stylesheet">
<link href="/stylesheets/bootstrap-responsive.css" rel="stylesheet">
<!-- ... some stuff -->
<style type="text/css">body {padding-top: 60px;}</style>

Вы хотите, чтобы отступы использовались, когда страница отображается на полной ширине (так что основной контент не отображается под верхней навигационной панелью), но вы хотите, чтобы "чувствительные" стили перекрывали это дополнение при сжатии ширину браузера (или отображение страницы на мобильном устройстве).

Итак, исправление прост: определить верхнее дополнение для элемента body между вашим включением bootstrap.css и bootstrap-responsive.css.

Образцы Bootstrap - отличный шаблон для начала работы. компоновка флюида делает следующее:

<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  .sidebar-nav {
    padding: 9px 0;
  }
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

Ответ 2

Вы можете использовать @media для переопределить заполнение тела. Вот так:

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<style type="text/css">
  body {
    padding-top: 60px;
  }
  @media (max-width: 979px) {
    body {
      padding-top: 0;
    }
  }
</style>