Несоответствие макета CSS (с использованием Twitter Bootstrap на Octopress)

Предыстория: в настоящее время я переношу свой блог Tumblr с (слегка) настроенной темой Bootstrap на Octopress.

Сайт Tumblr: http://eatsleeprepeat.net/ Сайт Octopress (WIP): http://stark-autumn-3851.herokuapp.com/ Github: https://github.com/elithrar/octopress/tree/master/.themes/eatsleeprepeat (таблицы стилей см. в sass/ )

Самая большая проблема сейчас заключается в том, что hero-unit, содержащий отдельные сообщения, не соответствует (насколько я вижу) утверждениям @media в файле _bootstrap_responsive.css, который загружается внизу screen.css на самом сайте (через Октопресс).

Структура HTML идентична (в том, что касается div-элемента-героя), и Web Inspector в Chrome не сообщает мне ничего полезного (читай: я могу понять).

Если есть кто-то с хорошим CSS-fu и несколькими свободными минутами, я был бы очень признателен.

Обновление: я решил проблему с блоком-героем (по горизонтали), поэтому теперь он учитывает размер страницы. Это произошло из-за действительно очевидной ошибки: "id" вместо "class" для контейнера.

Однако, сказав это: у меня все еще есть проблема с вертикальным выравниванием hero-unit под navbar navbar-fixed-top div; между ними нет промежутка.


person elithrar    schedule 30.06.2012    source источник
comment
где этот геройский юнит?   -  person Alp    schedule 30.06.2012


Ответы (2)


Вам может понадобиться добавить следующие правила CSS:

.container::before, .container::after {
    display: table;
    content: "";
}
.container::after {
    clear: both;
}
.container::before, .container::after {
    display: table;
    content: "";
}
person Alp    schedule 30.06.2012
comment
К сожалению, не повезло — добавил его в конец существующего CSS и никакой разницы. - person elithrar; 30.06.2012

Я исправил это, добавив следующее:

  <style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
</style>
person elithrar    schedule 12.07.2012