Вопрос по css, html, twitter-bootstrap – Twitter Bootstrap Отзывчивый Navbar сломан на маленьких экранах

14

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

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

Вот мой HTML в формате шаблона Jade.

<code>.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
</code>

Ваш Ответ

2   ответа
23

Ты можешь использовать@media вoverride обивка кузова. Как это:

<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>
Error: User Rate Limit Exceeded
@media (min-width: 768px) and (max-width: 979px) { ... }
47

потому что вы определили верхний отступ дляbody элементafter в том числе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>

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

Так что исправить это просто:define the top padding for the body element between your inclusion of bootstrap.css and 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">
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded Miles
Error: User Rate Limit Exceeded

Похожие вопросы