Zentrieren Bootstrap Navbar horizontal und vertikal

Ich bin neu in Bootstrap und ich versuche, die Navbar sowohl horizontal als auch vertikal zu zentrieren, so dass es in etwa so aussieht aber ich kann nicht scheinen, es herauszufinden.Zentrieren Bootstrap Navbar horizontal und vertikal

Hier ist der html:

<html> 
    <body> 
     <nav class="navbar navbar-default"> 
      <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </div> 
      <div class="collapse navbar-collapse" id="nav"> 
       <ul class="nav navbar-nav"> 
       <li class="active"><a href="#home">Home</a></li> 
       <li><a href="#portfolio">Portfolio</a></li> 
       <li><a href="#blog">Blog</a></li> 
       <li><a href="#pages">Pages</a></li> 
       <li><a href="#features">Features</a></li> 
       <li><a href="#mega-menu">Mega menu</a></li> 
       <li><a href="#contact">Contact</a></li> 
       </ul> 
      </div><!-- /.navbar-collapse --> 
      </div><!-- /.container-fluid --> 
</nav> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="bootstrap/js/bootstrap.min.js"></script> 
    </body> 
</html>

und CSS:

nav { 
    color: #fff; 
    height: 112px; 
    text-transform: uppercase; 
    font-size: 15px; 
    font-weight: bold; 
}

Quelle

2016-07-23 Sam

Wenn Sie die Links, die Sie diese Regeln zu den .navbar-nav und li Klassen (die meisten wahrscheinlich, dass Sie anwenden müssen zentrieren möchten möchte diese auch in einer Media-Abfrage).

Centered Verbindungen CSS

@media (min-width: 768px) { 
    .navbar.navbar-default .navbar-nav { 
    width: 100%; 
    text-align: center; 
    } 
    .navbar.navbar-default .navbar-nav > li { 
    display: inline-block; 
    float: none 
    } 
}

Und Sie können line-height verwenden Sie die Höhe Ihrer Links einzustellen, so dass sie vertikal ausgerichtet sind.

Vertikal Link Anpassung

@media (min-width: 768px) { 
    .navbar.navbar-default .navbar-nav > li > a { 
    line-height: 4; 
    } 
}

Arbeitsbeispiel:

.navbar.navbar-default { 
 
    background: white; 
 
    border: 1px solid transparent 
 
} 
 
.navbar.navbar-default .navbar-nav.navbar-center > li > a, 
 
.navbar.navbar-default .navbar-search > li > a { 
 
    color: #266080; 
 
} 
 
@media (max-width: 767px) { 
 
    .navbar.navbar-default { 
 
    padding: 15px 0; 
 
    } 
 
    .navbar.navbar-default .navbar-collapse { 
 
    margin-top: 15px; 
 
    margin-bottom: -15px; 
 
    border: 0; 
 
    box-shadow: none; 
 
    } 
 
} 
 
@media (min-width: 768px) { 
 
    .navbar.navbar-default {} .navbar.navbar-default .navbar-nav.navbar-center { 
 
    width: 100%; 
 
    text-align: center; 
 
    } 
 
    .navbar.navbar-default .navbar-nav.navbar-center > li { 
 
    display: inline-block; 
 
    float: none 
 
    } 
 
    .navbar.navbar-default .navbar-nav.navbar-center > li > a { 
 
    line-height: 4; 
 
    text-transform: uppercase; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    } 
 
    .navbar.navbar-default .navbar-search { 
 
    position: absolute; 
 
    right: 2%; 
 
    top: 17px; 
 
    line-height: 4; 
 
    font-size: 20px; 
 
    } 
 
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<nav class="navbar navbar-default navbar-static-top"> 
 
    <div class="container-fluid"> 
 

 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="nav"> 
 
     <ul class="nav navbar-nav navbar-center"> 
 
     <li class="active"><a href="#home">Home</a> 
 
     </li> 
 
     <li><a href="#portfolio">Portfolio</a> 
 
     </li> 
 
     <li><a href="#blog">Blog</a> 
 
     </li> 
 
     <li><a href="#pages">Pages</a> 
 
     </li> 
 
     <li><a href="#features">Features</a> 
 
     </li> 
 
     <li><a href="#mega-menu">Mega menu</a> 
 
     </li> 
 
     <li><a href="#contact">Contact</a> 
 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right navbar-search"> 
 
     <li><a href="#"><span class="glyphicon glyphicon-search"></span> </a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
</nav> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Quelle

2016-07-23 19:14:17 vanburen

Zentrieren Bootstrap Navbar horizontal und vertikal

Antwort

Verwandte Themen