Bootstrap 粘页脚（你必须得学会的简单技能），说得具体一点就是“将固定高度的页脚紧贴页面底部”。说完这句话，王二我有点诚惶诚恐，其实这句话出自bootstrap入门介绍，不过呢，请原谅我的粗鲁（灵感非原创），毕竟项目的实际情况和模板有所区别，所以参照模板，也不能确保快速的完成“粘页脚”的效果，那么还是听我来唠叨一下吧！
一、页面效果
页面非常简单，注意亮线为火狐边缘，可以很清楚的看到，页脚灰色部分沉浸在页面底部。
二、实例讲解（无navbar-fixed-top）
①、代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link type="text/css" rel="stylesheet" href="/ymeng/components/bootstrap/css/bootstrap.css" /> <style type="text/css"> html,body { height: 100%; } #wrap { min-height: 100%; height: auto !important; margin: 0 auto -200px; } #push height: 200px; } .footer { border-top: 1px solid #e5e5e5; color: #777; padding: 19px 0; background-color: #f5f5f5; } </style> <title>发布项目</title> </head> <body> <div id="wrap"> <nav class="navbar navbar-default navbar-fixed"> </nav> <div class=" container project_choose"> <div class="row"> <div class="col-md-5 project_general"> <span class="f14">我有一个梦想，有创意项目，有创意产品，点击发布回报</span> <div class="blank20"></div> <div> <a type="button" class="btn btn-danger" href="/ymeng/deal/initDealCaluseConfirm">立即发布产品</a> </div> </div> <div class="col-md-2"></div> <div class="col-md-5 project_agency"> <span class="f14">我有创业梦想，有融资需求，点击发布股权</span> <div class="blank20"></div> <div> <button type="button" class="btn btn-primary">立即发股权</button> </div> </div> </div> </div> <div id="push"></div> </div> <div class="footer "> <div class="container"> <div class="row footer-top"> <div class="col-sm-6 col-lg-6"> <h4></h4> <p>欢迎你加入，这里有你想要的.</p> </div> <div class="col-sm-6 col-lg-5 col-lg-offset-1"> <div class="row about"> <div class="col-xs-3"> <h4>关于</h4> <ul class="list-unstyled"> <li> <a href="">关于我们</a> </li> </ul> </div> <div class="col-xs-3"> <h4>联系方式</h4> <ul class="list-unstyled"> <li> <a target="_blank" title="云梦网官方微博" href="">新浪微博</a> </li> <li> <a href="">电子邮件</a> </li> </ul> </div> </div> </div> </div> <hr> <div class="row footer-bottom"> <ul class="list-inline text-center"> <li>Copyright ©2016. n 洛阳限公司 Software All Rights Reserved.</li> </ul> </div> </div> </div> </body> </html>
②、页面body布局
<body> <div id="wrap"> <nav class="navbar navbar-default navbar-fixed"> </nav> <div class=" container"> </div> <div id="push"></div> </div> <div class="footer "> </div> </body>
body中第一级元素，两个div，分别为wrap和footer
第二级元素中，一个nav，两个div，分别为container和push（如果你忘记了push这个div，ok，你的页面在缩放时会错乱的）
以上列出的元素自然粘页脚必不可少的。
