Вставить логотип внутри бутстрапа navbar

Question

Я пытаюсь поместить свой логотип внутри бутстрапа navbar, и теперь я его получил.

Проблема в том, что навигационная панель ломается на мобильных устройствах, логотип сбрасывается, кто-нибудь знает, в чем проблема и как исправить?

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
         <div class="container"> 
         <div class="navbar-header"> 
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
          <span class="sr-only">Toggle navigation</span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          </button> 
         </div> 
         <a class="navbar-brand"> <img class="logo-bar" src="http://pubcrawlsp.site44.com/assets/img/logo/logo3.png"></a> 
         <div id="navbar" class="collapse navbar-collapse"> 
          <ul class="nav navbar-nav navbar-right"> 
           <li><a href="sobre.html">QUEM SOMOS</a></li> 
           <li><a href="faq.html">FAQ</a></li> 
           <li><a href="https://www.facebook.com/pubcrawlsp/photos_stream?ref=ts" target="_blank">FOTOS</a></li> 
           <li><a href="contato.html">CONTATO</a></li> 
           <li class="active-y"><a href="reservar.html">RESERVAR</a></li> 
          </ul> 
         </div><!--/.nav-collapse --> 
         </div> 
        </nav> 

Пример ->http://jsfiddle.net/d5cyt1wp/

Спасибо.

Answer 1

Добавить pull-right класс в .navbar-header. Прямо сейчас, этот div занимает полную ширину экрана, подталкивая логотип ниже. Обновлено скрипка: http://jsfiddle.net/m7acx1v8/

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
         <div class="container"> 
         <div class="navbar-header pull-right"> 
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
          <span class="sr-only">Toggle navigation</span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          </button> 
         </div> 
         <a class="navbar-brand"> <img class="logo-bar" src="http://pubcrawlsp.site44.com/assets/img/logo/logo3.png"></a> 
         <div id="navbar" class="collapse navbar-collapse"> 
          <ul class="nav navbar-nav navbar-right"> 
           <li><a href="sobre.html">QUEM SOMOS</a></li> 
           <li><a href="faq.html">FAQ</a></li> 
           <li><a href="https://www.facebook.com/pubcrawlsp/photos_stream?ref=ts" target="_blank">FOTOS</a></li> 
           <li><a href="contato.html">CONTATO</a></li> 
           <li class="active-y"><a href="reservar.html">RESERVAR</a></li> 
          </ul> 
         </div><!--/.nav-collapse --> 
         </div> 
        </nav> 

Answer 2

Марка Логотип должен идти в <div class="container">. Переместить его внутри DIV, так что это должно исправить:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
        <div class="container"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
         <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"> <img class="logo-bar" src="http://pubcrawlsp.site44.com/assets/img/logo/logo3.png"></a> 
        </div> 

        <div id="navbar" class="collapse navbar-collapse"> 
         <ul class="nav navbar-nav navbar-right"> 
          <li><a href="sobre.html">QUEM SOMOS</a></li> 
          <li><a href="faq.html">FAQ</a></li> 
          <li><a href="https://www.facebook.com/pubcrawlsp/photos_stream?ref=ts" target="_blank">FOTOS</a></li> 
          <li><a href="contato.html">CONTATO</a></li> 
          <li class="active-y"><a href="reservar.html">RESERVAR</a></li> 
         </ul> 
        </div><!--/.nav-collapse --> 
        </div> 
       </nav> 

Также проверьте официальной документации here