CSS佈局差異（在Octopress上使用Twitter Bootstrap）

Question

背景：我目前正在將我的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（見上海社會科學院/的樣式表）

現在最大的問題是不符合的方式，所包含的各個崗位hero-unit （從我可以看到的）到_bootstrap_responsive.css文件中的@media語句，該文件在站點本身（通過Octopress）加載在screen.css的底部。

HTML結構是相同的（就英雄單位div而言），Chrome中的Web Inspector並沒有告訴我任何有用的信息（請閱讀：我能理解）。

如果有人有一些好的CSS-fu和幾分鐘的空閒時間，我會非常感激。

更新：我已經解決了英雄單位（水平）問題，所以它現在尊重頁面大小。這是由於真的是明顯錯誤：「id」代替「class」代表容器。

但是，這樣說：我仍然有一個問題，hero-unit垂直對齊navbar navbar-fixed-top div下面;它們之間沒有間距。

Answer 1

我已通過添加固定下面這樣的：

​​3210

Answer 2

您可能需要添加這些CSS規則：

.container::before, .container::after { 
    display: table; 
    content: ""; 
} 
.container::after { 
    clear: both; 
} 
.container::before, .container::after { 
    display: table; 
    content: ""; 
}