页面底部的Bootstrap页脚 [英] Bootstrap footer at the bottom of the page
问题描述
我已经阅读了很多有关此的文章，但仍然没有找到答案。
我有一个要放在页面末尾的页脚，而不是固定的。
问题是页脚位于内容的结尾。看图片。
I have read a lot of posts about this but I still didn't find an answer. I have a footer that I want to be at the end of the page, not fixed. The problem is that the footer is where the content ends. Look at picture.
这是我的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，仅适用于页脚：
This is my CSS, for the footer only:
.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;
}
推荐答案
使用 bootstrap时4 ，可以使用flexbox达到预期的效果：
When using bootstrap 4, flexbox could be used to achieve desired effect:
<body class="d-flex flex-column min-vh-100">
<header>HEADER</header>
<content>CONTENT</content>
<footer class="mt-auto"></footer>
</body>
请检查示例：引导程序4
在引导程序3 中，且不使用引导程序。解决此问题的最简单且跨浏览器的解决方案是为 body 对象设置最小高度。然后使用 bottom：0 规则为页脚设置绝对位置。
In bootstrap 3 and without use of bootstrap. The simplest and cross browser solution for this problem is to set a minimal height for body object. And then set absolute position for the footer with bottom: 0 rule.
body {
min-height: 100vh;
position: relative;
margin: 0;
padding-bottom: 100px; //height of the footer
box-sizing: border-box;
}
footer {
position: absolute;
bottom: 0;
height: 100px;
}
请检查以下示例：
引导程序3
这篇关于页面底部的Bootstrap页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
