Bootstrap navbar - как сделать navbar-header полную ширину

Question

Как можно сделать заголовок или заголовок на панели навигации по-своему?

Я добавил clear:both; по адресу collapse navbar-collapse, но все дополнения перепутаны.

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

Результат:

Слово Марка следует согласовать со словом Home. Является ли это возможным? Каков правильный способ работы в Bootstrap?

EDIT:

Answer 1

Вот fiddle. Используйте media query и сбросить padding для небольших экранов:

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

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

Bootstrap documentation for it's media querys

Answer 2

Вы можете просто добавить маржу к .navbar-header, а затем использовать media screen, чтобы изменить его на меньшие устройства. Вот код:

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

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

Вот codepen с примером: http://codepen.io/anon/pen/zqjKpg