Bootstrap 3 Стеки панели навигации в Chrome

Chrome загружает сайт со сложенной панелью навигации (http://www.rmsdetroit.com), но при обновлении отображается это правильно на одной строке. Я нашел похожий вопрос на здесь, но ни один из ответов не сработал.

Мой навигационный код:

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

google-chrome html collapse twitter-bootstrap
person DiscRiskandBisque    schedule 04.02.2014    source источник
comment
Не по теме: navbar не является допустимой ролью ARIA, а src не является допустимым свойством якоря. Рассмотрите возможность проверки вашего HTML. validator.w3.org/#validate_by_input   -  person isherwood    schedule 05.03.2014
comment
D'о, вы правы, спасибо! Однако, несмотря на исправление всех ошибок проверки, проблема остается. Отредактирую сообщение выше, чтобы отразить изменения.   -  person DiscRiskandBisque    schedule 18.03.2014

Ответы (1)


arrow_upward
0
arrow_downward

Я не знаю технических причин, стоящих за этим, но у меня была такая же проблема (исключительно с Chrome), и я решил проблему, изменив тег, содержащий класс navbar-brand, с <a> на <div>. Я просмотрел Bootstrap CSS и не увидел ничего, что требовало бы, чтобы класс 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>
person lanmaster53    schedule 24.01.2015