Bootstrap-Navigationsleiste an der unteren Mitte des Bildschirms ausrichten - Zielseite

Question

Ich verwende eine Bootstrap-Vorlage, und ich kann nicht für mein Leben herausfinden, wie ich meinen Navbar-Text in die untere Mitte des Bildschirms bringen kann. Ich habe versucht, die Bootstrap CSS für. Navbar, Navbar-rechts, etc. mit vertikal-align: unten zu bearbeiten. Es stays at the top no matter what. Hier

ist ein Link auf die Bootstrap-Vorlage http://startbootstrap.com/template-overviews/landing-page/

Und hier ist der Code:

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

Verwenden Sie die navbar-fixed-bottom Klasse ..

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

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