我通常熟悉使用css刷新页脚的技术。
但是我在将这种方法用于Twitter引导时遇到了一些麻烦,很可能是因为Twitter引导本质上是响应式的。使用Twitter引导,我不能得到页脚冲洗到页面底部使用上述博客文章中描述的方法。
我通常熟悉使用css刷新页脚的技术。
但是我在将这种方法用于Twitter引导时遇到了一些麻烦,很可能是因为Twitter引导本质上是响应式的。使用Twitter引导,我不能得到页脚冲洗到页面底部使用上述博客文章中描述的方法。
当前回答
使用这段代码在引导它的工作
<div class="navbar fixed-bottom">
<div class="container">
<p class="muted credit">Footer <a href="http://google.com">Link</a> and <a
href="http://google.com/">link</a>.</p>
</div>
</div>
其他回答
使用Bootstrap 3.6.6测试。
HTML
<div class="container footer navbar-fixed-bottom">
<footer>
<!-- your footer content here -->
</footer>
</div>
CSS
.footer {
bottom: 0;
position: absolute;
}
HTML
<div id="wrapper">
<div id="content">
<!-- navbar and containers here -->
</div>
<div id="footer">
<!-- your footer here -->
</div>
</div>
CSS
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
}
#content {
padding-bottom: 100px; /* Height of the footer element */
}
#footer {
width: 100%;
height: 100px; /* Adjust to the footer needs */
position: absolute;
bottom: 0;
left: 0;
}
对于Sticky Footer,我们在HTML中使用了两个DIV来实现基本的Sticky Footer效果。这样写:
HTML
<div class="container"></div>
<div class="footer"></div>
CSS
body,html {
height:100%;
}
.container {
min-height:100%;
}
.footer {
height:40px;
margin-top:-40px;
}
发现这里的片段工作得很好
Html:
<div id="wrap">
<div id="main" class="container clear-top">
<p>Your content here</p>
</div>
</div>
<footer class="footer"></footer>
CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
}
要处理宽度限制布局,请使用以下方法,这样您就不会得到圆角,并且您的导航条将与应用程序的两侧齐平
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="width-constraint clearfix">
<p class="pull-left muted credit">YourApp v1.0.0</p>
<p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
</div>
</div>
</div>
然后可以使用CSS重写引导类来调整高度、字体和颜色
.navbar-fixed-bottom {
font-size: 12px;
line-height: 18px;
}
.navbar-fixed-bottom .navbar-inner {
min-height: 22px;
}
.navbar-fixed-bottom .p {
margin: 2px 0 2px;
}