Bootstrap 4导航栏折叠后链接消失问题求助

问题出在你给所有导航链接加的d-none d-md-inline-block类上：

• d-none会默认隐藏元素
• d-md-inline-block仅让元素在屏幕宽度≥768px（md断点）时显示为行内块级元素

而导航栏的折叠状态恰恰是在屏幕宽度<768px时触发的，这时候d-none的优先级生效，所有链接都被隐藏，所以点击折叠按钮后看不到内容。

修复方案 #

将每个导航链接中的d-none d-md-inline-block替换为合适的显示类：

• 若想让小屏幕下链接独占一行，使用d-block d-md-inline-block
• 若想保持和大屏一致的行内块显示，直接用d-inline-block

修改后的代码示例 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg sticky-top bg-dark navbar-dark py-1">
  <div class="container">
    <a class="py-2 navbar-brand" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mx-auto" role="img" viewBox="0 0 24 24" focusable="false"><title>Product</title><circle cx="12" cy="12" r="10"></circle><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"></path></svg>
    </a>
    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="py-2 d-block d-md-inline-block" href="#">Tour</a>
        </li>
        <li class="nav-item">
          <a class="py-2 d-block d-md-inline-block" href="#">Product</a>
        </li>
        <li class="nav-item">
          <a class="py-2 d-block d-md-inline-block" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="py-2 d-block d-md-inline-block" href="#">Enterprise</a>
        </li>
        <li class="nav-item">
          <a class="py-2 d-block d-md-inline-block" href="#">Support</a>
        </li>

        <li class="nav-item">
          <a class="py-2 d-block d-md-inline-block" href="{% url 'logout' %}">Logout</a>
        </li>
        <li class="nav-item">
          <a class="py-2 d-block d-md-inline-block" href="{% url 'dashboard' %}">Dashboard</a>
        </li>

        <li class="nav-item">
          <a class="py-2 d-block d-md-inline-block" href="{% url 'login' %}">Login</a>
        </li>
        <li class="nav-item">
          <a class="py-2 d-block d-md-inline-block" href="{% url 'landingpage:register' %}">Sign Up</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

额外提示：Bootstrap 4的折叠功能需要依赖jQuery和Popper.js，确保你在页面底部引入以下脚本，否则折叠按钮点击后不会触发展开/收起动作：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

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