背景:我目前正在将我的 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
的垂直对齐有疑问;它们之间没有间距。
最佳答案
您可能需要添加这些 CSS 规则:
.container::before, .container::after {
display: table;
content: "";
}
.container::after {
clear: both;
}
.container::before, .container::after {
display: table;
content: "";
}
关于CSS 布局差异(在 Octopress 上使用 Twitter Bootstrap),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11270828/