页面底部的Bootstrap页脚
Iva*_*van 13 html css twitter-bootstrap
我已经阅读了很多关于此的帖子,但我仍然没有找到答案.
我有一个页脚,我想要在页面的末尾,而不是修复.
问题是页脚是内容结束的地方.看图片.
这是我的HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Mobtech - Privatni korisnici </title>
<!--Ubaci bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="css/basic-template.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</head>
<body>
<!--Navigation bar -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container">
<span class="sr-only"> Pokazi i sakrij navigaciju </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span> <img src="Slike/logo.png" alt="LogoSlika"/> </span>
<font face="Roboto Condensed" size="4" color="green"> Mobtech </font>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-container">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html"> Po?etna strana </a> </li>
<li class="active"><a href="#"> Privatni korisnici </a> </li>
<li><a href="poslovni.html"> Poslovni korisnici </a> </li>
<li><a href="uredjaji.html"> Ure?aji </a> </li>
<li><a href="onama.html"> O Nama </a> </li>
</ul>
</div>
</div>
</nav>
<br />
<div class="container"> <!--Container -->
<div class="row">
<!-- Kolona na velikom ekranu (lg) prikazuje duzinu jedne kolone, Ekstra small (xs) prikazuje 4 kolone -->
<div class="col-lg-12 bg-success">
<p> Outer div </p>
<div class="col-lg-6 bg-primary">
<p> Inner div </p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="mojFooter">
<font face="Roboto Condensed" size="4"> <center>
<div class="container">
<div class="row" style="margin-top: 7px;">
<p> © Copyright Ivan Proši? 2016.</p>
</div>
<div class="bottom-footer">
<div class="col-md-12">
<ul class="footer-nav">
<li> <a href="https://www.facebook.com/"> Facebook </a> </li>
<li> <a href="https://twitter.com/"> Twitter </a> </li>
<li> <a href="https://plus.google.com/"> Google+ </a> </li>
</ul>
</div>
</div>
</div>
</font> </center>
</footer>
<!-- JavaScript fajl -->
<script src="js/jquery.min.js"></script>
<!-- Kompresovan JavaScript fajl -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
这是我的CSS,仅适用于页脚:
.mojFooter{
background-color: #f8f8f8;
color: #00a651;
padding-top: 0px;
border-top: 1px solid #e7e7e7;
margin-bottom: 0px;
}
.bottom-footer{
border-top: 1px solid #00a651;
margin-top: 0px;
padding-top: 7px;
color: #00a651;
}
.footer-nav li{
display: inline;
padding: 0px 40px;
}
.footer-nav a{
color: grey;
text-decoration: none;
}
Rob*_*son 37
就我的 Bootstrap4 而言：
<body class="d-flex flex-column min-vh-100">
<div class="wrapper flex-grow-1"></div>
<footer></footer>
</body>
- 赞成，因为这使用 bootstrap 并且不需要额外的 CSS (4认同)
luk*_*uke 28
针对您的问题,最简单和跨浏览器的解决方案是为body对象设置最小高度.然后absolute用bottom: 0规则设置页脚的位置.
body {
min-height: 100vh;
position: relative;
margin: 0;
}
footer {
position: absolute;
bottom: 0;
}
请查看此示例: FIDDLE
- 这只适用于您不需要scoll的情况. (9认同)
- 您可以选择为主体设置页脚高度的“底部填充”，以防止页脚在主体底部隐藏内容。 (2认同)