具有动态字体大小调整和容器流体的引导导航栏？答案

【问题标题】：Bootstrap navbar with dynamic font resizing and container-fluid?具有动态字体大小调整和容器流体的引导导航栏？
【发布时间】：2017-01-26 04:57:08
【问题描述】：

我正在尝试在我的网站顶部添加一个品牌文本 + 菜单，以便在窗口变大/变小时时按比例缩放字体大小，与其余引导内容（例如 h1、p）的方式相同.最好的方法是什么？

此外，当窗口很小时，我仍然希望尽可能长时间地在彼此旁边而不是在彼此下方显示菜单项。但我不知道如何在导航栏元素中使用 col-md 规则。这应该以其他方式完成吗？

我遇到的另一个问题是，我想将 container-fluid 用于导航栏，以便将项目完全对齐到屏幕的右侧，但它似乎无法与我正在使用的 text-right ，只是搞砸了。这里有任何提示或更好的方法来实现所有这 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/demo http://www.antoniothonis.com/thonis/

【问题讨论】：

标签： twitter-bootstrap menu navbar

【解决方案1】：

看看这个帖子：Font scaling based on width of container

除非必要，否则不要折叠

在引导网站上：http://getbootstrap.com/components/#navbar-default 在溢出的内容中，他们提到了这一点：

更改导航栏在折叠模式和水平模式之间切换的点。自定义 @grid-float-breakpoint 变量或添加您自己的媒体查询。

菜单项完全右对齐

您可以按照此处所述创建课程container-full： 100% width Twitter Bootstrap 3 template

【讨论】：

【解决方案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;
    }
}

【讨论】：