Bootstrap 3 和粘性页脚
[英] Bootstrap 3 and Sticky Footer
本文介绍了Bootstrap 3 和粘性页脚的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在过去的一个小时里，我一直在试图弄清楚我的粘性页脚不工作到底出了什么问题.我的结构与 getboostrap 站点上给出的示例完全相同，但它似乎不起作用.有什么想法到底出了什么问题?
所有引导 css 文件都正确加载.
<div id="包裹"><div class="navbar navbar-inverse navbar-fixed-top"><div class="容器"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="/">应用程序名称</a>
<div class="collapse navbar-collapse"><ul class="nav navbar-nav"><li><a href="/">首页</a></li><li><a href="/Home/About">关于</a></li><li><a href="/Home/Contact">联系方式</a></li><ul class="nav navbar-nav navbar-right"><li><a href="/Account/Register" id="registerLink">注册</a></li><li><a href="/Account/Login" id="loginLink">登录</a></li>
<div class="容器"><div class="jumbotron"><h1>ASP.NET</h1><p class="lead">ASP.NET 是一个免费的 Web 框架，用于使用 HTML、CSS 和 JavaScript 构建出色的网站和 Web 应用程序.</p><p><a href="http://asp.net" class="btn btn-primary btn-large">了解详情»</a></p>
<div class="row"><div class="col-md-4"><h2>开始使用</h2><p>ASP.NET MVC 为您提供了一种强大的、基于模式的方式来构建动态网站实现关注点的清晰分离，并让您完全控制标记用于愉快、敏捷的开发.</p><p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">了解详情»</a></p>
<div class="col-md-4"><h2>获取更多库</h2><p>NuGet 是一个免费的 Visual Studio 扩展，可让您轻松添加、删除和更新 Visual Studio 项目中的库和工具.</p><p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">了解详情»</a></p>
<div class="col-md-4"><h2>虚拟主机</h2><p>您可以轻松找到一家网络托管公司，为您的应用程序提供合适的功能和价格组合.</p><p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">了解详情»</a></p>
<div id="页脚"><div class="容器"><p class="text-muted credit">示例礼貌<a href="http://martinbean.co.uk">Martin Bean</a>和<a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
我找到了解决方案.我认为包括所有的 CSS 也会有页脚的 CSS，但显然它没有.您需要以下内容才能使用引导程序制作粘性页脚
html,身体 {高度:100%；/* html 和 body 元素不能有任何填充或边距.*/}/* 页面内容的包装器向下推页脚 */#裹 {最小高度:100%；高度:自动！重要；高度:100%；/* 按高度负缩进页脚 */边距:0 自动 -60px；/* 按页脚高度填充底部 */填充:0 0 60px；}/* 这里设置页脚的固定高度 */#页脚{高度:60px；背景色:#f5f5f5；}
解决方案
为什么不使用 :
.navbar-fixed-bottom
这将解决您底部固定的导航问题，您可以在其中放置任何内容.
for the past hour I've been trying to figure out what exactly is wrong with my sticky footer not working. I have the exact same structure as the example given on the getboostrap site, but it doesn't seem to work. Any ideas what is exactly wrong?
All the bootstrap css files are loaded correctly.
<body style="">
<div id="wrap">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/Home/Contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/Account/Register" id="registerLink">Register</a></li>
<li><a href="/Account/Login" id="loginLink">Log in</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
<p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more »</a></p>
</div>
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
<p>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and gives you full control over markup
for enjoyable, agile development.
</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Get more libraries</h2>
<p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Web Hosting</h2>
<p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div>
</div>
</body>
I found the solution. I thought including all the CSS would also have the CSS for the footer but apparently it does not. You require the following to make a sticky footer work with bootstrap
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
解决方案
Why you are not using :
.navbar-fixed-bottom
This will solve your bottom fixed navigation issue and you can place anything in it.
这篇关于Bootstrap 3 和粘性页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
