在布局页面中放置带有引导程序的页脚？

Posted 2023-03-06

【中文标题】在布局页面中放置带有引导程序的页脚？

【英文标题】：Place a footer with bootstrap in Layout-Page?

【发布时间】：2015-01-15 20:05:11

【问题描述】：

我正在使用引导框架和 ASP.Net MVC 5。我希望在屏幕左下方有一个页脚。阅读了一些教程和示例，我最终在我的 _Layout.cshtml 文件中得到了这段代码：

 <footer class="footer">
    <div class="container">
        <p class="text-muted"><span>Version <a href="/ReleaseNotes.html">1.1.0.0</a></span></p>
    </div>
 </footer>

这会在我的页面左下角显示一个页脚。但这不是固定的。如果网站不包含任何内容，页脚将显示在页面顶部。

如何设置页脚的固定位置？

【问题讨论】：

Twitter Bootstrap 3 Sticky Footer 的可能重复项

【参考方案1】：

我在 getbootstrap.com 上这样做：http://getbootstrap.com/2.3.2/examples/sticky-footer-navbar.html

这是我的例子：

http://jsfiddle.net/zcbpbt5h/

CSS：

html,
body 
  height: 100%;


/* Wrapper for page content to push down footer */
 #wrap 
   min-height: 100%;
   height: auto !important;
   height: 100%;
   /* Negative indent footer by it's height */
   margin: 0 auto -60px;
 

 #push,
 #footer 
   height: 60px;
 

#footer 
  background-color: #f5f5f5;

HTML：

<div id="wrap">
<div class="container">content</div>
    <div id="push"></div>
</div>
 <footer id="footer">
 <div class="container">
     footer
  </div>
</footer>

【讨论】：

太好了，我自己找到了这个示例，但认为相关的 CSS 类已经包含在引导程序中。现在可以使用了，谢谢。