導航欄崩潰 - >引導

我建立一個網站：http://www.sbr-accounting.com/導航欄崩潰 - >引導

，現在我有我的菜單響應。所以當你減小屏幕的寬度時，菜單會消失，只會顯示一個菜單按鈕。大！

但是怎麼來的，當我打開網站上的iPhone（5S）菜單盡顯，我需要的菜單將顯示倒塌爲默認值。

任何人都可以幫助我嗎？

<!-- Create full width navbar --> 
    <div class='navbar navbar-default navbar-static-top'> 

     <!-- Inside full width navbar create a container --> 
     <div class='container'> 

     <div class='navbar-header'> 
      <!-- Website title including home link --> 
      <a href='index.html' class='navbar-brand'>SBR-accounting</a> 


      <!-- Create nav icon for small displays. The text should only be visible for screen readers --> 
      <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> 
     </div> 

      <ul class='nav navbar-nav navbar-right collapse navbar-collapse'> 
      <li><a href='/'>home</a></li> 
      <li><a href='/'>Informatie</a></li> 
      <li><a href='/'>Contact</a></li> 
      </ul> 

     </div> <!-- Close container inside navbar --> 
     </div> <!-- Close full width navbar -->

來源

2015-09-07 Krooy_mans

但事情是你已經把容器內的導航欄div總是產生問題 –

它的內部準備好了，不是嗎？ –

嘗試在'container'和'col-xs-12'網格內包裝整個'navbar'。 –

我看了你的代碼，通過桌面和移動。在<head>標記中，您缺少視口<meta>標記。

從引導documentation

自舉2，我們增加了可選的移動友好的風格爲框架的關鍵方面。藉助Bootstrap 3，我們將項目從一開始就改寫爲移動友好。他們沒有在上添加可選的移動樣式，而是直接進入核心。事實上， Bootstrap是最先移動的。移動第一種風格可以在整個庫中找到，而不是在單獨的文件中。

爲確保正確的渲染和觸控縮放，請將視口meta 標記添加到您的<head>。

<meta name="viewport" content="width=device-width, initial-scale=1">

Here你可以找到關於視窗基礎一點解釋。從那裏我推斷出這個解釋：

width屬性控制視口的大小。它可以被設置爲特定數量的像寬度= 600或到處於CSS像素在屏幕的在刻度的100％的寬度的特殊值設備寬度值的像素。（有對應的高度和設備高度值，其可用於基於視口高度改變大小或位置元件的頁面是有用的。）當所述頁面是

初始規模屬性控制縮放級別首先加載了。最大規模，最小規模和用戶可擴展屬性控制着用戶如何放大或縮小頁面的方式。

來源

2015-09-07 18:01:44

哇，這太神奇了！ –

導航欄崩潰 - >引導

回答

相關問題