html - 将 Bootstrap 导航栏与屏幕底部中心对齐 - 登录页面

Question

我正在使用 Bootstrap 模板，但我终究无法弄清楚如何让我的导航栏文本到达屏幕的底部中心。我已经尝试使用 vertical-align: bottom 编辑 .navbar、.navbar-right 等的 bootstrap css。它stays at the top no matter what .

这是 Bootstrap 模板的链接 http://startbootstrap.com/template-overviews/landing-page/

代码如下:

<!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
        <div class="container topnav">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" 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 topnav" href="#">Start Bootstrap</a> -->
                <img src="img/RyanIsGreat.png" width=200px height=100px>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" >
                <ul class="nav navbar-nav navbar-right" >
                    <!--Here is what I am trying to bottom-center align
                         The about, services, and contacts all appear 
                          on the right, as is shown in the image-->
                    <li>
                        
                        <a href="#about">About</a>
                    </li>
                    <li>
                        <a href="#services">Services</a>
                    </li>
                    <li>
                        <a href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

Answer 1

使用 navbar-fixed-bottom 类..

<nav class="navbar navbar-default navbar-fixed-bottom topnav" role="navigation">
        <div class="container topnav">
        ...

http://www.codeply.com/go/RBR3Hsg5bH