我有以下HTML和CSS
<style type="text/css">
.padding {
padding: 80px;
}
.home {
height: 100%;
}
.picture {
width: 100%;
height: 830px;
position: absolute;
}
.background-image {
background: url("imgs/dep-graph-pic.PNG") no-repeat;
width: 100%;
background-size: cover;
height: 1100px;
position: fixed;
opacity: 0;
}
.page-header {
position: absolute;
padding: 35px 0 33px;
border-bottom: 2px solid #225378;
background: #dcdcdc;
margin: 40px 0 0;
}
.search {
margin-left: 20em;
margin-right: 20em;
}
.navbar {
margin-bottom: 0;
border-radius: 0px;
color: #FFFFFF;
max-height: 40px;
min-height: 40px;
position: absolute;
width: 100%;
}
.navbar-default {
background-color: rgb(47, 126, 178);;
border: none;
}
.navbar-default .navbar-brand {
color: #FFFFFF;
padding: 10px 15px;
}
.navbar-version {
color: #FFFFFF;
bottom: 0;
top: 20px;
}
.navbar-default .navbar-nav>li>a {
color: #FFFFFF;
}
.navbar>.container-fluid .navbar-brand {
margin-left: 14em;
}
.empty-space {
height: 2200px;
}
.bounce-container {
position: absolute;
margin-left: 50%;
margin-top: 900px;
bottom:0%;
width: 50px;
height: 50px;
cursor: pointer;
}
.bounce {
color: #225378;
position: absolute;
bottom: 0;
margin-left: -25px;
height: 50px;
width: 50px;
font-size: 40px;
-webkit-animation: bounce 1s infinite;
}
@-webkit-keyframes bounce {
0% {
bottom: 2px;
}
25%, 75% {
bottom: 8px;
}
50% {
bottom: 10px;
}
100% {
bottom: 0;
}
}
</style>
<div class="home" ng-controller="HeaderCtrl">
<!--navbar-->
<nav class="navbar navbar-default navbar-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/">{{appName}}</a>
<a class="navbar-version" href="#/"><font size="2" color="white">{{appVersion}}</font></>
</div>
</div><!-- /.container-fluid -->
</nav>
<!--header-->
<div class="page-header col-md-12">
<form class="search">
<div class="input-group col-md-12">
<div class="input-group-btn">
<button ng-click="submitPair()" class="btn btn-info"
style="
background-color: #1c4b6a;
border-color: #1c4b6a;">
<span class="glyphicon glyphicon-search"></span></button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</form>
</div>
</div>
<div id="bottom"></div>
</div>
有问题的是类navbar-version。当我希望它位于底部时,它总是出现在容器的顶部。填充没有反映在显示屏中