CSS 布局差异（在 Octopress 上使用 Twitter Bootstrap）答案

【问题标题】：CSS Layout Disparity (using Twitter Bootstrap on Octopress)CSS 布局差异（在 Octopress 上使用 Twitter Bootstrap）
【发布时间】：2012-06-30 01:47:54
【问题描述】：

背景：我目前正在将我的 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 与 _bootstrap_responsive.css 文件中的@media 语句不符合（据我所知），该文件加载在底部screen.css 在网站上（通过 Octopress）。

HTML 结构是相同的（就 hero-unit div 而言），Chrome 中的 Web Inspector 没有告诉我任何有用的信息（阅读：我可以理解）。

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

更新：我已经解决了 hero-unit（水平）的问题，所以它现在尊重页面大小。这是由于一个非常明显的错误：容器的“id”而不是“class”。

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

【问题讨论】：

那个英雄单位在哪里？

标签： css heroku twitter-bootstrap octopress

【解决方案1】：

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

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

【讨论】：

不幸的是没有这样的运气 - 将它附加到现有 CSS 的末尾并且没有区别。

【解决方案2】：

我已通过添加以下内容来解决此问题：

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

【讨论】：