Question

我正在使用一个引导程序模板，我不能为我的生活弄清楚如何让我的导航栏文本到达屏幕的底部中心。我尝试使用vertical-align：bottom编辑.navbar，.navbar-right等的bootstrap css。它stays at the top no matter what。

以下是引导程序模板http://startbootstrap.com/template-overviews/landing-page/

的链接

以下是代码：

＆＃13;

<!-- 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>

＆＃13;

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

将引导导航栏对齐到屏幕的底部中心 - 登录页面

1 个答案: