2014-02-04 3 views
0

Chrome загружает сайт с помощью навигационной панели (http://www.rmsdetroit.com), но после обновления отображает его правильно на одной строке. Я нашел здесь similar question, но ни один из ответов не работал.Bootstrap 3 Navbar Stacks в Chrome

Мои Navbar Код:

<nav class="navbar navbar-inverse navbar-fixed-top navbar-custom"> 

    <div class="navbar-header"> 

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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 class="navbar-brand" href="?page=home"><img class="rms-logo" src="img/logo.png" alt="RMS Sound Studios" /></a> 

    <p class="navbar-text rms-info hidden-xs hidden-sm"><a class="phone-link" href="tel:+15555555555"><span class="phone">555-555-5555</span></a><br /> 
    5555 Fake St<br/> 
    Fakesville, MI 48009</p> 

    <ul class="list-inline pull-right hidden-md hidden-lg"> 
     <li class="social"><a href="http://www.facebook.com/pages/RMS-Sound-Studios/186122143923"><img src="img/facebook.png" alt="Facebook" /></a></li> 
     <li class="social"><a href="https://twitter.com/#!/RMSSoundStudios"><img src="img/twitter.png" alt="Twitter" /></a></li> 
     <li class="social"><a href="http://vimeo.com/rmssoundstudios"><img src="img/vimeo.png" alt="Vimeo" /></a></li> 
     <li class="social"><a href="https://soundcloud.com/rms-sound-studios"><img src="img/soundcloud.png" alt="SoundCloud" /></a></li> 
    </ul> 

    <ul class="list-inline pull-left hidden-xs hidden-sm" id="socialbox"> 
     <li class="social"><a href="http://www.facebook.com/pages/RMS-Sound-Studios/186122143923"><img src="img/facebook.png" alt="Facebook" /></a></li> 
     <li class="social"><a href="https://twitter.com/#!/RMSSoundStudios"><img src="img/twitter.png" alt="Twitter" /></a></li> 
     <li class="social"><a href="http://vimeo.com/rmssoundstudios"><img src="img/vimeo.png" alt="Vimeo" /></a></li> 
     <li class="social"><a href="https://soundcloud.com/rms-sound-studios"><img src="img/soundcloud.png" alt="SoundCloud" /></a></li> 
    </ul> 

    </div><!-- navbar-header --> 

    <div class="collapse navbar-collapse"> 

    <ul class="nav navbar-nav"> 
     <li><a href="?page=home">Home</a></li> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <li><a href="?page=gear">Gear</a></li> 
      <li><a href="?page=studios">Studios</a></li> 
      <li><a href="?page=photos">Photos</a></li> 
     </ul> 
     </li><!-- .dropdown --> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Work <b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <li><a href="?page=post">Post</a></li> 
      <li><a href="?page=music">Music</a></li> 
     </ul> 
     </li> 
     <li><a href="?page=contact">Contact</a></li> 
     <li><a href="http://clientftp.rmsdetroit.com">FTP</a></li> 
     <li><a href="?page=blog">Blog</a></li> 
     <li><a id="mno-a" href="https://itunes.apple.com/us/podcast/mustard-and-onions/id703720255?mt=2" target="_blank"><img class="img-rounded mno-play" src="img/podcast-icon.gif" /></a></li> 
    </ul> 

    </div><!-- collapse navbar-collapse--> 

</nav>  
+0

Off темы: 'navbar' не является допустимой роль ARIA, и' src' не действительное свойство якоря. Рассмотрите возможность проверки вашего HTML. http://validator.w3.org/#validate_by_input – isherwood

+0

D'oh, ты прав, спасибо! Однако при фиксированных ошибках проверки проблема все еще сохраняется. Будет отредактировать сообщение выше, чтобы отразить изменения. – DiscRiskandBisque

ответ

0

Я не знаю, технические рассуждения за ней, но у меня был тот же самый вопрос (исключительно с Chrome) и решить проблему, изменив тег, содержащий navbar-brand класс от <a> до <div>. Я просмотрел CSS Bootstrap и не видел ничего, что требовало, чтобы класс navbar-brand ассоциировался с якорем, поэтому я не вижу причин, почему его нельзя изменить. Вы должны быть в состоянии устранить проблему и достичь желаемого эффект путем встраивания ссылки внутри в <div>, как это:

<div class="navbar-brand"><a href="?page=home"><img class="rms-logo" src="img/logo.png" alt="RMS Sound Studios" /></a></div>