FireFox 31.0中的Bootstrap 3導航欄品牌徽標轉換導航鏈接

Question

我在Firefox 31.0中遇到此問題，當我將瀏覽器縮小到移動版本並單擊下拉圖標時，我的導航項將移到徽標的右側。 對於Chrome或Safari而言，這不是問題，僅在Firefox 31.0中存在。 我正在使用Bootstrap v3.2.0的最新版本。 我已將HTML和CSS粘貼到此帖子中以供參考。

CSS

#logo
{
    height: 100%;
      margin-top: 5px;
}
.navbar-nav
{
    padding-top: 7px;
}
.navbar
{
    top:-100px;
}
.navbar-brand
{
    padding: 0px;
}
.navbar
{
    min-height: 62px;
}
.navbar-toggle
{
    margin-top: 13px;
    margin-bottom: 12px;
}
.navbar-inverse .navbar-toggle {
  border-color: #000;
}

.navbar-inverse .navbar-nav li
{
    margin-right:14px;
}
.navbar-inverse .navbar-nav li a
{
    font-family: 'MuseoSans700', Verdana, Arial, TimesNewRoman;
    letter-spacing: 0.3px;
    font-size:13px;
}
.navbar-inverse {
  background-color: #000;
  border-color: #000;
}
.navbar-inverse
{
  background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.15) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.15) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(to bottom, #000 0, #000 100%);
}
.navbar-inverse .navbar-nav > li > a
{
    color: #ffffff;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus
{
    color:#545454;
}
.navbar-inverse .navbar-nav > li > a:active
{
    color:#545454;
}

HTML

<div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#" target="_self">
                <img id="logo" src="images/canyon_logo.png" alt="logo">
            </a>
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navBarCollapsed">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="collapse navbar-collapse navBarCollapsed">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#">CASE STUDIES</a>
                        </li>
                        <li>
                            <a href="#">ABOUT US</a>
                        </li>
                        <li>
                            <a href="#">CONTACT</a>
                        </li>
                    </ul>
            </div>
        </div>
</div>

謝謝，

阿貝爾

Answer 1

您需要在<div class="navbar-header">....</div>添加徽標和切換按鈕。使用以下HTMl進行檢查。

HTML

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
        <a class="navbar-brand" href="#" target="_self">
            <img id="logo" src="images/canyon_logo.png" alt="logo">
        </a>
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navBarCollapsed"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
    </div>
    <div class="collapse navbar-collapse navBarCollapsed">
      <ul class="nav navbar-nav navbar-right">
        <li> <a href="#">CASE STUDIES</a> </li>
        <li> <a href="#">ABOUT US</a> </li>
        <li> <a href="#">CONTACT</a> </li>
      </ul>
    </div>
  </div>
</div>