我对页脚有疑问。
在旁边我有两列。这些列设置为自动上边距。
这里举个例子:http://jsfiddle.net/jewelsjacobs/kSgE6/light/。
如果您更改分辨率，使她脚下的列与图片重叠，而不是一直位于页面底部。
示例:
普通 View :
<!DOCTYPE html>
<html>
<head lang="pl">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.backstretch.js"></script>
</head>
<body>
<script>
$.backstretch("img/bg.jpg");
</script>
<style>
h1 {
text-align: center;
font-family: "AvanteGarde";
font-size: 70px;
}
header p{
font-family: "AvanteGarde";
text-align: center;
font-size: 20px;
}
@font-face{
font-family:"AvanteGarde";
src: url('font/font2.ttf');
}
.col-centered{
text-align: center;
margin: 0 auto;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
text-align: center;
font-family:"AvanteGarde";
}
.ng{
color: #3a8c03;
font-family: "AvanteGarde";
font-size: 40px;
margin-top: 0;
}
html {
height: 100%;
width: 100%;
min-width: 100%;
min-height: 100%;
position: relative;
}
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
margin-bottom: 60px;
}
.container-fluid{
height:60%;
display:table;
width: 100%;
padding: 0;
}
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
.centering {
float:none;
margin:0 auto;
}
header{
margin-bottom: 2%;
}
</style>
<header>
<h1><label style="color: #3a8c03"> F.P.H.U </label> <label style="color: #254c0b"> Darmont</label></h1>
<p style="color: #3a8c03">KOMINKI - OCZYSZCZALNIE - DORADZTWO - SERWIS</p>
</header>
<div class="container-fluid" style="width: 900px; margin: auto;">
<div class="row-fluid">
<div class="col-sm-6 col-centered">
<img src="img/oczyszczalnie.png" class="img-responsive center-block">
<p class="ng">oczyszczalnie</p>
</div>
<div class="col-sm-6 col-centered" style="padding-left: 120px">
<img src="img/kominki.png" class="img-responsive center-block">
<p class="ng">kominki</p>
</div>
</div>
</div>
<footer class="footer">
<p>Skontaktuj sie z nami i zapytaj o produkty</p>
<p>nr. tel: 924 456 256 e-mail: aaa@sga.com</p>
</footer>
</body>
</html>
最佳答案
Bootstrap website 上有很好的示例代码对于粘性页脚，
working example
关于html - Bootstrap 粘性页脚和两个响应列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27332796/