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 (有关样式表，请参阅 sass/)

目前最大的问题是包含各个帖子的 hero-unit 不符合(据我所知)@media 语句_bootstrap_responsive.css 文件，它在网站本身的 screen.css 底部加载(通过 Octopress)。

HTML 结构是相同的(就 hero-unit div 而言)，Chrome 中的 Web Inspector 没有告诉我任何有用的信息(阅读:我能理解)。

如果有人有一些不错的 CSS-fu 和几分钟的空闲时间，我将非常感激。

更新:我已经解决了 hero-unit 的问题(水平方向)，因此它现在符合页面大小。这是由于一个确实明显的错误:容器的“id”而不是“class”。

但是，要说的是:我仍然对 navbar navbar-fixed-top div 下方的 hero-unit 的垂直对齐有疑问；它们之间没有间距。

Answer 1

您可能需要添加这些 CSS 规则:

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