twitter-bootstrap Bootstrap 3 和粘性页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19070813/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 and Sticky Footer
提问by teh0wner
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?
在过去的一个小时里，我一直在试图弄清楚我的粘性页脚不工作到底出了什么问题。我的结构与 getboostrap 站点上给出的示例完全相同，但它似乎不起作用。任何想法到底有什么问题？
All the bootstrap css files are loaded correctly.
所有引导 css 文件都已正确加载。
<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
我找到了解决方案。我认为包括所有的 CSS 也会有页脚的 CSS，但显然它没有。您需要以下内容才能使用引导程序制作粘性页脚
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;
}
回答by Mandeep Gill
Why you are not using :
为什么不使用：
.navbar-fixed-bottom
This will solve your bottom fixed navigation issue and you can place anything in it.
这将解决您的底部固定导航问题，您可以在其中放置任何内容。
回答by George Durzi
Made a quick Fiddle with your code and some tweaks to the footer: http://jsfiddle.net/2Zaxt/.
对您的代码进行了快速的摆弄，并对页脚进行了一些调整：http: //jsfiddle.net/2Zaxt/。
<div id="footer" class="container">
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="navbar-inner navbar-content-center">
<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>
</nav>
</div>
回答by teh0wner
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;
}
回答by Joshua
This is how it worked for me.
这就是它对我的工作方式。
I added the Footer ID and custom style values to that ID , and for the same look and feel added "navbar-default"
我向该 ID 添加了页脚 ID 和自定义样式值，并为相同的外观添加了“navbar-default”
HTML
HTML
<div id="footer" class="navbar-default">
<div class="container">
<p>Your Footer Content Here</p>
</div>
</div>
CSS
CSS
#footer {
background-color: #F5F5F5;
bottom: 0;
height: 60px;
position: relative;
width: 100%;
}
回答by a learner has no name
You can find an example for a 'sticky footer with a fixed navbar' (fixed to the top of the page) in the bootstrap documentation: http://getbootstrap.com/examples/sticky-footer-navbar/
您可以在引导程序文档中找到“带有固定导航栏的粘性页脚”（固定到页面顶部）的示例：http: //getbootstrap.com/examples/sticky-footer-navbar/
CSS:
CSS：
/* Sticky footer styles */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
/* Fixed navbar styles */
body > .container {
padding-top: 60px;
}
回答by Miomir Dancevic
Simple unique solution for sticky footer baes on @teh0wner, i added some JS
@teh0wner 上粘性页脚的简单独特解决方案，我添加了一些 JS
CSS
CSS
html {
position: relative;
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
}
JS
JS
$(document).ready(function() {
var height = $('footer').height();
$('body').css({
"margin-bottom": height
});
});
回答by Murat SEKER
In bootstrap 3, container and footer classes, somehow override your css rules. I tried to change my footer's background-color. I tried many things that I found as solutions on the web and couldn't done successfully. After use clearfix class for footer the page became what I really want to see.
在引导程序 3 中，容器和页脚类以某种方式覆盖了您的 css 规则。我试图改变我的页脚的背景颜色。我尝试了很多我在网上找到的解决方案，但都没有成功。在页脚使用 clearfix 类后，页面变成了我真正想看到的。
.myFooter {
background-color: #c4a9f1;
width: 100%;
}
.hi-icon a {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
z-index: 100;
}<footer class="footer clearfix">
<div class="container myFooter">
<div class=" ">
<div class="col-sm-3">
<h3 class="page-header">Part 1 </h3>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</div>
<div class="col-sm-3">
<h3 class="page-header">Part 2</h3>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</div>
</div>
</div>
</div>
</footer>