Bootstrap navbar - wie man navbar-header volle Breite macht

Question

Wie kann man den navbar-header volle Breite oder eine Zeile allein machen?

Ich habe clear:both; auf collapse navbar-collapse hinzugefügt, aber alle Polsterung sind durcheinander.

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 

      <!-- navbar-header --> 
      <div class="navbar-header" style="border: 4px solid red !important;"> 
       <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> 
      <!-- navbar-header --> 

      <!-- email --> 
      <div class="pull-right hidden-xs"> 
       email: <a href="#">xxx{at}example.com</a> 
      </div> 
      <!-- email --> 

      <!-- collapse content --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="border: 2px solid blue; clear:both;"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="home.html">Home</a></li> 
        <li><a href="work.html">News</a></li> 
        <li><a href="shop.html">Projects</a></li> 
        <li><a href="shop.html">Links</a></li> 
        <li><a href="contact.html">Contact</a></li> 
        <li><a href="contact.html">CV</a></li> 
       </ul> 


       <div class="pull-right"> 
        <form class="navbar-form" role="search"> 
         <div class="input-group"> 
          <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> 
          <div class="input-group-btn"> 
           <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
          </div> 
         </div> 
        </form> 
       </div> 

      </div> 
      <!-- collapse content --> 

     </div> 

</nav> 

Ergebnis:

Das Wort Marke sollte mit dem Wort Startseite ausrichten werden. Ist es möglich? Was ist der richtige Weg in Bootstrap?

EDIT:

Answer 1

Hier ist die fiddle. Verwenden Sie media query und setzen Sie die padding für die kleineren Bildschirme:

.navbar-brand{ 
    padding: 15px 15px 15px 30px; 
} 

@media (max-width: 768px){ 
    .navbar-brand{ 
     padding: 15px; 
    } 
} 

Bootstrap documentation for it's media querys

Answer 2

Sie können einfache Add-Marge auf .navbar-header und dann media screen verwenden abzuändern, um sie auf kleineren Geräts. Hier ist der Code:

.navbar-header { 
    margin-left: 15px !important; 
} 

@media screen and (max-width: 768px) { 
    .navbar-header { 
    margin-left: -15px !important; 
    } 
} 

Hier ist codepen mit Beispiel: http://codepen.io/anon/pen/zqjKpg