Question

我正在尝试将网页扩展为引导程序4（使用html font-size和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类迟早折叠

例如：

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

使用导航按钮：

隐藏-XS-向上
隐藏-MD-向上
隐藏LG-向上

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

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

1 个答案: