html - 如何在不破坏响应式导航栏的情况下在 Bootstrap 4 中缩放 html 字体大小

Question

我正在尝试以 bootstrap 4 方式缩放网页(在其他任何地方使用 html 字体大小和 rem)，但它似乎破坏了响应式导航栏的激活(即它没有正确激活)。

实际问题是当您缩小 View 时，响应式导航栏应该隐藏菜单选项并提供汉堡包图标。但是，如果您放大 html 字体大小，则响应式导航栏不会在菜单位于视口(viewport)之外时激活。在提供的示例中，使用 22px 字体缩小 View ，并查看菜单如何转到下一行。然后删除该 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 classes 迟早会折叠导航

例如:

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

使用导航按钮:

• 隐藏-xs-up
• 隐藏-md-up
• 隐藏的lg-up

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