Bootstrap幫助 - 響應菜單不顯示

我正在爲學校做一個項目，在那裏我們正在爲一家卡車學校重新構建一個網站。我是超級笨手笨腳的新手，我遇到的問題是這個。Bootstrap幫助 - 響應菜單不顯示

當我調整頁面大小時，主導航消失，因爲它應該是，但我不能讓小菜單圖標導航顯示。根據getbootstrap.com和幾次搜索，我嘗試了所有你應該做的事情，但沒有成功。我認爲問題的一部分可能是我通過將導航區域分成兩個容器來做某種黑客行爲，這樣帶有徽標的頂部可能與實際菜單的下部顏色不同，而沒有菜單或標題的黑客東西最終都會以雙方不太明顯的差距結束。

所以我不確定我做的黑客事情是否導致問題，如果是這樣，我可以採取其他措施使導航欄頂部的顏色與底部不同，而不會獲得不同的顏色邊距在兩側？或者我只需要用切換代碼做一些不同的事情？

這裏是有問題的HTML（不切換代碼...我試了好幾個地方，所以我只是把它，希望它會更容易閱讀）：

<nav class="navbar navbar-static-top" role="navigation"> 
    <div class="backgroundBlack"> 
    <div class="container "> 
    <div class="navbar-header "> 
     <h1><img src="images/logo.png" alt="logo" />Carolina Trucking Academy</h1> 
    </div> 
    </div> 
</div> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" > 
     <div class="container"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a></li> 
     <li role="presentation"><a href="careers.html">Careers in Trucking</a></li> 
     <li role="presentation"><a href="classes.html">Our Classes</a></li> 
     <li role="presentation"><a href="admissions.html">Admissions</a></li> 
     <li role="presentation"><a href="about.html">About Us</a></li> 
     <li role="presentation"><a href="contact.html">Contact</a></li> 
     </ul> 
    </div> 
    </div> 
</nav>

任何幫助將不勝感激！謝謝！

來源

2016-02-28 Liz

你只需要遵循bootstrap提供的結構。在較小的屏幕上，導航是隱藏的，並通過導航欄標題中的按鈕進行切換。首先你缺少的是導航欄切換按鈕。此按鈕將以data-target=""屬性在移動屏幕上定位您的導航欄摺疊。我還將navbar默認類添加到導航欄中。這些是bootstrap已經實施的預製樣式。另外爲了得到2種不同的背景顏色，我剛剛將black-bg類添加到導航欄標題中的容器中，然後更改導航欄標題CSS以顯示塊和100％的寬度。如果你想改變navbar-default的顏色，只需在css中定位該類，並且導航欄的鏈接部分將改變背景顏色。此外，我還在容器的示例中使用了容器流體。你可以改變它到容器，如果你想我只是覺得它看起來更好用容器流體。

下面是它可能應該是：

<nav class="navbar navbar-default navbar-static-top"> 
     <div class="navbar-header"> 
     <div class="container-fluid black-bg"> 
      <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" href="#">Logo</a> 
     </div><!--/.container-fluid --> 
     </div><!--/.navbar-header --> 
     <div id="navbar" class="navbar-collapse collapse"> 
     <div class="container-fluid"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a></li> 
      <li role="presentation"><a href="careers.html">Careers in Trucking</a></li> 
      <li role="presentation"><a href="classes.html">Our Classes</a></li> 
      <li role="presentation"><a href="admissions.html">Admissions</a></li> 
      <li role="presentation"><a href="about.html">About Us</a></li> 
      <li role="presentation"><a href="contact.html">Contact</a></li> 
      </ul> 
     </div><!--/.container-fluid --> 
    </div><!--/.nav-collapse --> 
    </nav>

而且，讓你的導航欄黑色和你的導航欄頭滿WIDT顯示，您可以添加自定義樣式，這些類的CSS：

.navbar-default{ 
    border-radius: 0; 
} 
.navbar-header{ 
    display: block; 
    width: 100%; 
} 
.black-bg{ 
    background: #000; 
}

這裏是你展示這個動作以及如何撥弄它看起來Fiddle

來源

2016-02-28 05:06:07

太謝謝你了！ – Liz

Bootstrap幫助 - 響應菜單不顯示

回答

相關問題