響應式CSS與Twitter Bootstrap問題

Question

我在我的網絡應用中使用Ruby on Rails和Twitter Bootstrap有一個NavBar。

導航欄看起來很好的瀏覽器：

但是，當我看到了在瀏覽器的web應用程序在我的Galaxy Note的導航欄斷裂。

從應用/視圖/佈局/ application.html.erb

<div class="masthead"> 
    <h3 class="active"><a href="/">WebsiteName</a></h3> 
    <div class="navbar"> 
     <div class="navbar-inner"> 
     <div class="container"> 
      <ul class="nav"> 
      <li class="active"><a href="/">Home</a></li> 
      <li><a href="/about">About</a></li> 
      <li><a href="/contact">Contact Us</a></li> 

      <% if current_user %> 
       <li class="dropdown"> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
         <strong><%= current_user.name %></strong> 
         <b class="caret"></b> 
        </a> 
        <ul class="dropdown-menu"> 
        <li><a href="/signout">Sign out</a></li> 
        </ul> 
      <% end %> 

      </ul> 
     </div> 
     </div> 
    </div> 
    </div> 

片段爲導航欄從主要借的CSS：
對齊導航實施例 - http://getbootstrap.com/2.3.2/examples/justified-nav.html

/* Customize the navbar links to be fill the entire space of the .navbar */ 
    .navbar .navbar-inner { 
    padding: 0; 
    } 
    .navbar .nav { 
    margin: 0; 
    display: table; 
    width: 100%; 
    } 
    .navbar .nav li { 
    display: table-cell; 
    width: 1%; 
    float: none; 
    } 
    .navbar .nav li a { 
    font-weight: bold; 
    text-align: center; 
    border-left: 1px solid rgba(255,255,255,.75); 
    border-right: 1px solid rgba(0,0,0,.1); 
    } 
    .navbar .nav li:first-child a { 
    border-left: 0; 
    border-radius: 3px 0 0 3px; 
    } 
    .navbar .nav li:last-child a { 
    border-right: 0; 
    border-radius: 0 3px 3px 0; 
    } 

我該如何解決這個問題？我現在正在學習響應式CSS，並且不知道如何解決它。

UPDATE：

請注意，上述問題已得到修復。
但是，當我修正這個問題時，我發現了一些錯誤。如果我太多地減小窗口的大小，導航欄就會被破壞。用戶部分走出導航欄。 該問題也反映在Bootstrap示例中，也是。

我附上了展示問題的屏幕截圖。要自己查看，只需在Bootstrap navbar example中減小窗口大小即可。

Answer 1

問題是「聯繫我們」鏈接正在包裝。注意，在Bootstrap example中，導航欄沒有多個單詞的鏈接。

將white-space: nowrap;加到.navbar .nav li a類。

這是一個功能demo。你所要做的就是調整要測試的幀的寬度。

演示包含2個導航欄：

• 有固定的問題，第一個導航欄。
• 第二個問題通過將其style屬性設置爲"white-space: normal;"來重現錯誤行爲，以隔離「聯繫我們」鏈接中的原因，從而覆蓋此修復程序。

還要注意，你有一個</li><% end %>前失蹤。

Answer 2

定義.navbar .nav 40像素的heihgt並添加overflow: hidden;

Answer 3

引導文件加載看起來應該像下面做出響應工作：

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