Bootstrap4导航栏移动端菜单项消失 如何优化提升易用性？

问题根因 #

• 你使用的navbar-expand-lg类规定了只有屏幕宽度≥992px（lg断点）时导航项才会直接展开，小于该尺寸时所有包裹在collapse navbar-collapse容器内的内容会默认隐藏，你没有添加对应的折叠菜单触发按钮，所以移动端看不到导航项
• 导航栏写死了height: 60px属性，就算呼出折叠菜单，固定高度也会导致展开的内容被截断无法显示
• Log Out按钮用了绝对定位，折叠菜单展开时会和其他导航项错位重叠，显示异常

具体优化方案 #

1. 新增移动端汉堡触发按钮 #

在navbar-brand对应的标签后添加Bootstrap4原生的折叠触发器，绑定到你的导航折叠容器idnavbarNavAltMarkup即可实现移动端点击呼出菜单的效果，代码如下：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="切换导航">
  <span class="navbar-toggler-icon"></span>
</button>

Bootstrap4的折叠交互依赖jQuery和popper.js，需要在页面body末尾引入对应资源（也可以替换为本地存放的资源文件）：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

2. 调整导航栏高度属性 #

把nav标签上的style="height: 60px;"修改为style="min-height: 60px;"，既可以保证桌面端导航栏高度符合设计预期，移动端折叠菜单展开时也能自动适配高度，不会出现内容截断的问题。

3. 修正Log Out按钮定位逻辑 #

删除按钮上的绝对定位样式，通过Bootstrap的间距类实现按钮靠右对齐，避免折叠时错位，修改后的导航容器代码如下：

<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
  <div class="navbar-nav">
    <a href="cars.html" class="nav-link text-dark" id="nav_cars">Cars</a>
    <a href="engine.html" class="nav-link text-dark" id="nav_engine">Engine</a>
  </div>
  <div class="ml-auto">
    <button type="submit" class="btn" name="create" style="background-color: #ffec00!important;">Log Out</button>
  </div>
</div>

注：这里同步把原代码里的text-light替换为text-dark，解决浅色背景搭配浅色文字对比度不足、看不清导航项的问题

4. 可选优化项 #

• 如果希望在更小的屏幕尺寸下就直接展开导航，可以把navbar-expand-lg替换为navbar-expand-md（屏幕≥768px时展开）或者navbar-expand-sm（屏幕≥576px时展开）
• 可以给当前选中的导航项添加active类，高亮显示用户当前所处页面，提升使用体验

内容的提问来源于stack exchange，提问作者nostradam