帶有動態字體大小調整和容器流體的Bootstrap導航欄？

Question

我試圖在我的網站頂部獲得一個品牌文本+菜單，以隨着窗口變得更大/更小而以字體大小進行縮放，與引導內容的其餘部分（例如h1，p）一樣。什麼是最好的方法來做到這一點？

另外，當窗口很小時，我仍然想要在eachother旁邊顯示菜單項，而不是在eachother下面，儘可能長。但我無法弄清楚如何在navbar元素中使用col-md規則。這應該以另一種方式完成嗎？

我有另一個問題，我想使用導航欄的容器液體，以便它完全對齊到屏幕右側的項目，但它似乎並沒有工作與組合我正在使用的文本，只是弄亂了。任何提示或更好的方法來達到所有這3個目標？

我的代碼目前的樣子：

<nav class="navbar navbar-inverse navbar-fixed-top"> 

      <a class="navbar-brand" href="#">Thonis</a> 

     <div class="container text-right"> <!-- Fluid seems to break the menu on mobile, how to fix? --> 

      <ul class="nav navbar-nav navbar-right"> 
       <li><a class="active" href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 

     </div> 
    </nav> 

見WIP /演示這裏http://www.antoniothonis.com/thonis/

Answer 1

1. 規模字體大小與窗口

看看這篇文章：Font scaling based on width of container

1. 不塌陷，除非必要

在引導網站：http://getbootstrap.com/components/#navbar-default 在溢出的內容，他們提到這一點：

變化點在倒塌和橫向模式之間的導航欄的開關。自定義@ grid-float-breakpoint變量或添加自己的媒體查詢。

菜單項全右對齊

可以使類container-full如下所述： 100% width Twitter Bootstrap 3 template

Answer 2

使用CSS媒體查詢！ http://www.w3schools.com/css/css_rwd_mediaqueries.asp

問題1，例如：

@media screen and (max-width: 480px) { 
    nav a { 
     font-size:80%; 
    } 
} 

或代替％的，使用REM，而不是用於定義字體大小：https://snook.ca/archives/html_and_css/font-size-with-rem。

使用Q2同樣的方法：，例如： -

@media screen and (max-width: 480px) { 
    nav .navbar-nav li { 
     float:left; 
    } 
}