0

背景：我目前正在将我的 Tumblr 博客（带有（轻微）定制的 Bootstrap 主题）带到 Octopress。

Tumblr 站点：http : //eatsleeprepeat.net/ Octopress 站点（WIP）：http ://stark-autumn-3851.herokuapp.com/ Github：https://github.com/elithrar/octopress/tree/master/。主题/eatsleeprepeat（参见 sass/ 样式表）

现在最大的问题是hero-unit包含各个帖子的方式不符合（据我所知）@media_bootstrap_responsive.css 文件中的语句，该文件加载在screen.css网站本身的底部（通过 Octopress）。

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

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

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

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

4

2 回答 2

1

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

.container::before, .container::after {
    display: table;
    content: "";
}
.container::after {
    clear: both;
}
.container::before, .container::after {
    display: table;
    content: "";
}
于 2012-06-30T02:24:53.787 回答
0

我通过添加以下内容解决了这个问题：

  <style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
</style>
于 2012-07-12T04:38:39.970 回答