如何在Bootstrap 4中缩放html字体大小而不会破坏响应式导航栏

Question

我试图缩放网页的bootstrap 4种方式（使用html字体大小和rem其他地方），但它似乎打破了响应式导航栏的激活（即它没有正确激活）。

实际的问题是，当您向下缩放视图时，响应式导航栏应该隐藏菜单选项并提供汉堡包图标。但是，如果您缩放html字体大小，则当菜单位于视口之外时，响应式导航栏不会激活。在提供的示例中，使用22px字体缩放视图，并查看菜单如何进入下一行。然后删除该CSS并缩放菜单，并使用16px（默认）字体工作得很好。

关于如何解决这个问题的任何想法，或者我做响应式导航栏和字体缩放不当？

https://jsfiddle.net/fsc6gpb8/3/

HTML

<nav class="navbar navbar-light bg-faded"> 
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2"> 
    &#9776; 
    </button> 
    <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"> 
    <a class="navbar-brand" href="#">Responsive navbar</a> 
    <ul class="nav navbar-nav"> 
     <li class="nav-item active"> 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Features</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Pricing</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">About</a> 
     </li> 
    </ul> 
    </div> 
</nav> 

CSS关于我的榜样和响应导航栏

html { 
    font-size: 22px; 
} 

文档：http://v4-alpha.getbootstrap.com/components/navbar/#collapsible-content

下面是一个实际的错误的图像：使用不同的CSS类

例如http://i.imgur.com/bI9GWVN.png

Answer 1

在自举V4，导航可以早晚折叠：

• 导航栏-可切换-XS
• 导航栏-可切换-MD
• 导航栏-可切换-LG

随着导航按钮：

• 隐藏-XS-了
• 隐藏-MD-了
• 隐藏LG-了

当然，您也可以使用媒体查询要做到这一点。