如何在 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

这是实际错误的图片：http://i.imgur.com/bI9GWVN.png

Answer 1

在 bootstrap v4 中，可以使用不同的 css 类

迟早折叠导航

例如：

navbar-toggleable-xs
navbar-toggleable-md
navbar-toggleable-lg

使用导航按钮：

隐藏-xs-up
隐藏-md-up
隐藏lg-up

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

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

How to scale html font size in Bootstrap 4 without breaking responsive navbar

html

css

frontend

bootstrap-4