我一直在将我的网站迁移到 UIkit 3 而不是 Bootstrap 4。但我已经在导航栏上停留了一段时间。现在，我的导航栏是在 Bootstrap 4 中构建的，看起来像这样：
https://jsfiddle.net/eztwL9p7/1/
<nav class="navbar navbar-toggleable-sm sticky-top navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<a class="navbar-brand">brand</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link">Blog <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
</ul>
<auth-partial>
<ul class="nav navbar-nav">
<li class="nav-item float-xs-right">
<a href="#" class="nav-link">Log in</a>
</li>
</ul>
</auth-partial>
</div>
</nav>
所以它只是一个普通的导航栏，但是当页面足够小时，会出现一个切换按钮，并且项目变成一个下拉列表。我一直在尝试将其迁移到 UIKit，但在他们的模板中我没有看到任何选项。如果我理解正确，似乎我必须制作 2 个导航栏，一个用于普通视图，然后一个较小的？
Navbar 文档建议像下面这样添加.uk-navbar-toggle类和.uk-navbar-toggle-icon—— 产生一个切换图标——但没有可扩展的菜单，也不能像 Bootstrap 那样隐藏指定的菜单项。
<nav class="uk-navbar uk-navbar-container uk-margin">
<div class="uk-navbar-left">
<a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
</div>
</nav>
Navbar 文档建议使用Off -canvas 组件（滑入和滑出页面的侧边栏） - 或Modal 组件- 但这些都不会导致 Bootstrap 样式的切换菜单。
显示响应式导航栏如何在 Bootstrap 的小屏幕上切换/隐藏指定元素的屏幕截图：
正常大小的屏幕 - 显示所有菜单项：
屏幕更小 - 部分或全部菜单项被隐藏：
较小尺寸的屏幕 - 按菜单显示菜单项：
