带有动态字体大小调整和容器流体的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; 
    } 
}