如何实现响应式折叠导航栏：小屏列表项显底部边框，大屏隐藏

需求回顾 #

小屏幕设备下，折叠展开的导航列表项之间显示底部分隔边框；大屏幕设备下，横向排列的列表项不显示任何底部边框。

问题分析 #

之前给<ul>添加border-bottom: 1px solid #aaa的方式存在两个问题：

• 大屏幕视图中，整个<ul>底部会出现多余边框
• 小屏幕视图中，只有整个列表的最后一项下方会显示边框，无法实现列表项之间的分隔

解决方案 #

核心思路是给每个列表项（<li>）添加底部边框，仅在小屏幕下显示，同时去掉最后一个列表项的边框避免重复，利用Bootstrap的lg断点（对应navbar-expand-lg的折叠触发阈值）来控制样式：

1. 移除<ul>标签内的border-bottom行内样式
2. 添加自定义CSS，针对小屏幕（小于lg断点）设置列表项的边框

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

  <style>
    a {
      color: #e02846;
      text-decoration: none;
    }
    
    a:hover {
      color: wheat;
    }
    
    .nav-div {
      background-color: #1A1A40;
      width: 100%;
      margin-bottom: 15px;
    }

    /* 小屏幕下给列表项加底部边框，最后一项不加 */
    @media (max-width: 991.98px) {
      .navbar-nav .nav-item {
        border-bottom: 1px solid #aaa;
      }
      .navbar-nav .nav-item:last-child {
        border-bottom: none;
      }
    }
  </style>
</head>

<body>
  <header>
    <div class="nav-div">
      <div class="boot-nav" style="padding: 10px;">
        <nav class="navbar navbar-expand-lg">
          <a class="navbar-brand" href="#">
            <img src="images/youtube-128.png" alt="Logo" width="35" height="29" class="d-inline-block align-text-top"> SafTube
          </a>

          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto" style="text-align: right;">
              <li class="nav-item">
                <a class="nav-link" href="./index.html">
                  <h3>home</h3>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="index.html">
                  <h3>Contact</h3>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="index.html">
                  <h3>About</h3>
                </a>
              </li>
            </ul>
          </div>

        </nav>
      </div>
    </div>

  </header>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

</body>

</html>

额外说明 #

• 给<li>添加了Bootstrap原生的nav-item类，给<a>添加了nav-link类，符合Bootstrap导航栏的规范，也能更好地继承框架的样式
• 媒体查询使用max-width: 991.98px，这是Bootstrap中lg断点的临界值（对应navbar-expand-lg在屏幕宽度≥992px时展开导航），确保样式只在折叠状态下生效

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