填充属性未反映在锚标记中

Question

我有以下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。当我希望它位于底部时，它总是出现在容器的顶部。填充没有反映在显示屏中