Twitter Bootstrap - 導航無響應？

我有以下標記：Twitter Bootstrap - 導航無響應？

<div class="navbar"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <ol class="nav"> 
       <li> 
        <a href="#">One</a> 
       </li> 
       <li> 
        <a href="#">Two</a> 
       </li> 
       <li> 
        <a href="#">Three</a> 
       </li> 
       <li> 
        <a href="#">Four</a> 
       </li> 
       <li> 
        <a href="#">Five</a> 
       </li> 
       <li> 
        <a href="#">Six</a> 
       </li> 
       <li> 
        <a href="#">Seven</a> 
       </li> 
       <li> 
        <a href="#">Eight</a> 
       </li> 
       <li> 
        <a href="#">Nine</a> 
       </li> 
       <li> 
        <a href="#">Ten</a> 
       </li>      
      </ol> 
     </div> 
    </div> 
</div>

這工作得很好我的桌面上，但一旦我開始調整瀏覽器，在菜單項目剛開始換行。我期望它變成一個垂直導航。難道我做錯了什麼？

我不想使用JavaScript解決方案，使按鈕出現，等我只想要一個簡單的CSS解決方案，不需要JS。我認爲Bootstrap會爲我處理這個問題。

更新1：它看起來像什麼

enter image description here

更新2：我希望它看起來像

enter image description here

來源

2012-10-21 StackOverflowNewbie

請發表你的CSS以及弄清楚發生了什麼。 – Caelea

您是否包含響應的css文件？ –

@Caelea - 我沒有寫任何CSS。我試圖讓Bootstrap儘可能地爲我做。 – StackOverflowNewbie

什麼你需要確保你使用頁面頂部的響應式元標記，並按照任何具體的建議來處理您正在嘗試的其他任何事情。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

我還建議查看Twitter Bootstrap網站的代碼本身以獲得額外的指導。

參見：http://twitter.github.com/bootstrap/scaffolding.html#responsive

更新

另外，還要確保你的導航欄，您使用的數據，切換並相應地設置類：

<div class="container"> 

    <!-- .btn-navbar is used as the toggle for collapsed navbar content --> 
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </a> 

    <!-- Be sure to leave the brand out there if you want it shown --> 
    <a class="brand" href="#">Project name</a> 

    <!-- Everything you want hidden at 940px or less, place within here --> 
    <div class="nav-collapse"> 
    <!-- .nav, .navbar-search, .navbar-form, etc --> 
    </div> 

</div>

的響應導航欄需要崩潰插件和響應式Bootstrap CSS文件。

請參見：http://twitter.github.com/bootstrap/components.html#navbar

來源

2012-10-21 14:14:28 Ollie

我有響應元標記和響應CSS。我會嘗試進行屏幕顯示和發佈。 – StackOverflowNewbie

已更新的答案。 – Ollie

我不想要數據切換的東西（正如我原來的文章中提到的那樣）。我嘗試過，它的kindda工程。但是我在頁面上有兩個導航欄，當我點擊一個按鈕時，兩個導航欄都會對其進行響應。另外，我不想隱藏菜單項並通過單擊按鈕來顯示它們。當屏幕變小時，我只想讓它垂直堆疊。 – StackOverflowNewbie

Twitter Bootstrap - 導航無響應？

回答

相關問題