粘滞的响应式页脚jekyll-bootstrap

时间：2013-10-06 02:48:04

标签： twitter-bootstrap jekyll-bootstrap

我使用的是jekyll-bootstrap流氓主题，但我在jekyll-bootstrap中粘贴页脚时遇到了很多问题。

有没有办法在这个主题中贴上页脚？

http://themes.jekyllbootstrap.com/preview/hooligan/

1 个答案:

答案 0 :(得分：3)

要使用粘性页脚，您需要修改默认主题模板并添加一些css。

_include /主题/ THEMENAME /default.html： 

...
<body>
  <div class="wrap">
    <!-- navbar and content here! -->
    <div class="footer-push"></div>
  </div>

  <footer>
    <div class="container">
      <!-- footer here! -->
    </div>
  </footer>
</body>
...

Sass代码： 

/* Sticky footer */
$footerHeight: 75px;

//Page full height
html, body {
    height: 100%;
}

#page-wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    // Negative indent footer by it's height
    margin-bottom: -($footerHeight);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

//footer fixed height
.footer-push,
footer {
    height: $footerHeight;
    max-height: $footerHeight;
    overflow: hidden;
}

流氓主题与粘性页脚

我用粘性页脚使用了这个主题。

Hooligan theme screenshot

您可以在终端中安装它：

rake theme:install git="https://github.com/Miguelos/hooligan.git"

Bootstrap粘性页脚

Here你有一个关于twitter bootstrap的粘性页脚的例子。

相关问题
最新问题