Wie ändere ich die navbar-Bootstrap-Höhe und lasse den Text in der Mitte bleiben?

Question

Es gibt so viele Möglichkeiten, wie ich die bootstrap navbar bearbeiten kann. Eigentlich, um die Farbe zu ändern, und seine Höhe war schon fertig. Allerdings die Texte zurückgelassen. this is the case.

Answer 1

EDIT:

Wenn Sie die navbar weniger machen wollen als 50px Sie brauchen, um CSS-Eigenschaft min-height in .navbar-default von Bootstrap außer Kraft setzen.

JSFiddle

Hinweis:

Dies obwohl Ihr Hamburger-Menü in kleineren Geräten beeinflussen. Man könnte es kleiner in 768px machen und oben ohne die min-height in .navbar default zu definieren, aber es in einer Medienabfrage, wie dies zu tun:

@media (min-width:768px) { 
.navbar-default { 
    min-height:30px; 
} 
} 

---

LÖSUNG:

Wenn Sie Ihr navbar des ändern Höhe, vertikale Ausrichtung der Anker kann folgendermaßen durchgeführt werden:

1. Entfernen Sie die obere und untere Polsterung f von den Ankern.
2. Legen Sie die Höhe der Höhe des Ankers mit dem Wert der Höhe der Navigationsleiste fest.

---

JSFiddle

---

Code-Schnipsel:

.navbar-default { 
 
    height: 80px; 
 
} 
 
.navbar-default .navbar-nav > li > a, 
 
.navbar-brand { 
 
    padding-top: 0; 
 
    padding-bottom: 0; 
 
    line-height: 80px; 
 
} 
 
.navbar-form { 
 
    margin-top: 22px; 
 
}

<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.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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> 
 
     <a class="navbar-brand" href="#">Brand</a> 
 
    </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"> 
 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a> 
 
      </li> 
 
      <li><a href="#">Another action</a> 
 
      </li> 
 
      <li><a href="#">Something else here</a> 
 
      </li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a> 
 
      </li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">One more separated link</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <form class="navbar-form navbar-left" role="search"> 
 
     <div class="form-group"> 
 
      <input type="text" class="form-control" placeholder="Search"> 
 
     </div> 
 
     <button type="submit" class="btn btn-default">Submit</button> 
 
     </form> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a> 
 
      </li> 
 
      <li><a href="#">Another action</a> 
 
      </li> 
 
      <li><a href="#">Something else here</a> 
 
      </li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav>