Bootstrap 4实现xs屏幕垂直导航及顶部导航栏响应式折叠问题

我来帮你梳理这两个Bootstrap 4导航相关的问题，结合官方规范和实际使用经验给你解决方案：

1. 在xs屏幕下让导航变为垂直布局 #

Bootstrap 4的响应式布局默认以xs（屏幕宽度<576px）为最小断点，要实现xs屏幕下导航垂直排列，分两种情况处理：

普通导航（非导航栏） #

直接利用Flex布局的响应式类，因为Bootstrap 4的flex-column默认会让元素垂直排列，再配合flex-sm-row让大屏幕（≥576px）下恢复水平：

<ul class="nav flex-column flex-sm-row">
  <li class="nav-item"><a class="nav-link" href="#">首页</a></li>
  <li class="nav-item"><a class="nav-link" href="#">文章</a></li>
  <li class="nav-item"><a class="nav-link" href="#">关于</a></li>
</ul>

导航栏（Navbar）组件 #

如果是顶部导航栏，折叠展开后的菜单默认就是垂直布局的，不需要额外设置；如果是未折叠状态下想在xs屏幕垂直，同样可以用Flex类调整，比如给navbar-nav添加flex-column flex-sm-row：

<div class="collapse navbar-collapse">
  <ul class="navbar-nav flex-column flex-sm-row">
    <!-- 导航项 -->
  </ul>
</div>

2. 创建响应式折叠导航栏 & 解决xs标识无效问题 #

首先明确一个关键点：Bootstrap 4已经移除了xs前缀的折叠相关类！它的导航栏展开/折叠逻辑是通过navbar-expand-*系列类控制的：

• 不加任何navbar-expand-*：默认在xs屏幕（<576px）折叠，≥576px展开
• navbar-expand-sm：≥576px展开，xs屏幕折叠（和默认效果一致）
• navbar-expand-md：≥768px展开，xs/sm屏幕折叠
• 以此类推到lg/xl断点

你之前用xs标识没生效，就是因为Bootstrap 4不再支持这个写法了。下面给你一个完整的可运行示例，结合你提供的blog-masthead样式：

完整代码示例 #

<!-- 导航栏 -->
<nav class="navbar navbar-expand-sm blog-masthead navbar-dark">
  <!-- 品牌链接 -->
  <a class="navbar-brand" href="#">我的博客</a>
  
  <!-- 折叠触发按钮 -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#blogNavbar" aria-controls="blogNavbar" aria-expanded="false" aria-label="切换导航">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <!-- 折叠内容 -->
  <div class="collapse navbar-collapse" id="blogNavbar">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页 <span class="sr-only">(当前)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">归档</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">关于我</a>
      </li>
    </ul>
    <!-- 右侧搜索框 -->
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="搜索文章" aria-label="搜索">
      <button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
    </form>
  </div>
</nav>

<!-- 你的自定义样式 -->
<style>
/* Masthead for nav */
.blog-masthead {
  background-color: #0275D8;
  -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
  box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}
</style>

重要注意事项 #

• 必须引入Bootstrap 4的依赖JS文件：jQuery、Popper.js和Bootstrap自身的JS，否则折叠按钮点击后不会有任何反应（这是很多人踩坑的点）。
• 如果想要导航栏在xs屏幕下始终展开（不折叠），只需要添加navbar-expand类即可，不需要加断点前缀。

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