Vertikales Zentrieren von Nav-Objekten in Bootstrap 3

Question

Also habe ich meine navbar auf eine benutzerdefinierte Höhe von 80px eingestellt, aber das macht meine Nav-Objekte jetzt nicht vertikal zentriert. Ich habe nach einer Antwort gesucht, um sie vertikal in Relation zu ihrem Elternelement zu zentrieren, also dachte ich, dass ich StackOverflow eine Chance geben würde.

Screenshot: http://screencast.com/t/zfUuX9SSQK

HTML:

<div class="container-fluid isModified"> 
    <div class="row"> 
     <nav class="navbar isModified" role="navigation"> 
      <div class="col-lg-8 col-lg-offset-2"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse"> 
         <span class="sr-only">Toggle Navigation</span> 
         <span class="icon-bar isModified"></span> 
         <span class="icon-bar isModified"></span> 
         <span class="icon-bar isModified"></span> 
        </button> 
        <a href="index.php" class="navbar-brand">Tickets</a> 
       </div> 

       <div class="collapse navbar-collapse" id="nav-collapse"> 
        <ul class="nav navbar-nav isModified"> 
         <li><a href="#">Link 1</a></li> 
         <li><a href="#">Link 2</a></li> 
         <li><a href="#">Link 3</a></li> 
        </ul> 
       </div> 
      </div> <!-- end col-lg-12 --> 
     </nav> 
    </div> <!-- end row --> 
</div> <!-- end container -->  

CSS:

.navbar.isModified { 
height: 80px; 
border-radius: 0; 
background-color: #cccccc; 

} 

.icon-bar.isModified { 
background-color: #fff; 

} 

Answer 1

Die vertikale Ausrichtung kann auf verschiedene Weise erfolgen, wie es in this Stack Overflow question gezeigt. Sie sind jedoch relativ situationsbezogen, dh es gibt keinen einzigen Ansatz, der auf jeden Fall angewendet werden kann.

Für das Problem, dem Sie gegenüberstehen, würde ich vorschlagen, die line-height Ansatz, da alle Ihre Navigationsinhalte in einer einzigen Zeile ist. Entfernen einfach jede vertikale Polsterung an den Elementen in Fragen, und setzen sie die gleichen line-height wie die gewünschte Behälterhöhe haben (80px):

.navbar-nav li a { 
    padding:0 15px; 
    line-height:80px;  
} 
.navbar-header a { 
    padding:0 15px; 
    line-height:80px;  
} 

hier ein Bootply ist zu demonstrieren. Hoffe das hilft! Lass es mich wissen, wenn du irgendwelche Fragen hast.

Alternativ können Sie verwenden:

.navbar.isModified a { 
    padding:0 15px; 
    line-height:80px;  
} 

Obwohl Sie diese zu breit Selektor eines CSS finden können, wenn Sie auf Styling andere Links in Ihrem navbar anders planen.

Hinweis: Wenn Sie möchten, dass die mobile Version des Menüs in Ordnung ist, müssen Sie möglicherweise Medienabfragen verwenden, um diese Stile mit eigenen zu überschreiben.

Answer 2

Sie können dies auf verschiedene Arten tun, je nachdem, wie Ihre Nav-Links sich verhalten müssen. Wahrscheinlich möchtest du die Linienstärke auf die Links anwenden, so dass sie beim Schweben immer noch die volle Höhe der Navigationsleiste über 768px haben (oder nicht, abhängig). Sie können dann ein anderes Medium verwenden und der Klasse navbar-header Auffüllen hinzufügen, um eine größere Navigationsleiste zu haben. Verwenden Sie jedoch keine feste Höhe, da Ihr Toggle auf Mobilgeräten keine Hintergrundfarbe hat, da die Navigationsleiste den Standardwert min-height: 50px hat.

Arbeitsbeispiel:

.navbar.isModified { 
 
    background-color: #cccccc; 
 
} 
 
.navbar.isModified .icon-bar { 
 
    background-color: #fff; 
 
} 
 
@media (min-width: 768px) { 
 
    .navbar.isModified .navbar-brand { 
 
    line-height: 50px; 
 
    } 
 
    .navbar.isModified .navbar-nav > li > a { 
 
    line-height: 50px; 
 
    } 
 
} 
 
@media (max-width: 767px) { 
 
    .navbar.isModified .navbar-header { 
 
    padding: 15px 0; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <nav class="navbar navbar-static-top isModified" role="navigation"> 
 
     <div class="col-lg-8 col-lg-offset-2"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse"> 
 
      <span class="sr-only">Toggle Navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a href="index.php" class="navbar-brand">Tickets</a> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse" id="nav-collapse"> 
 
      <ul class="nav navbar-nav"> 
 
      <li><a href="#">Link 1</a> 
 
      </li> 
 
      <li><a href="#">Link 2</a> 
 
      </li> 
 
      <li><a href="#">Link 3</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </nav> 
 
    </div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>