Chrome加载的时候导航栏是堆叠的(http://www.rmsdetroit.com),但是刷新的时候会正确的显示在一行上。我在这里找到了一个similar question,但是没有一个答案起作用。
我的导航条代码:
<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>
1条答案
按热度按时间3qpi33ja1#
我不知道这背后的技术原因,但我也有同样的问题(仅适用于Chrome),并通过将包含
navbar-brand
类的标签从<a>
更改为<div>
解决了这个问题。我查看了Bootstrap CSS,没有发现任何需要将navbar-brand
类与锚关联的内容,所以我看不出有什么理由不能改变它。你应该可以通过在<div>
中嵌入这样一个链接来修复你的问题并达到预期的效果: