Angular 2+Bootstrap 4导航栏缩小时文本消失问题求助

我帮你排查了下问题，主要是两个核心原因：一是你混用了Bootstrap 3的旧组件语法，和Bootstrap 4不兼容；二是默认的折叠断点不符合你想要的1000px要求。下面是具体的解决方案：

1. 修正导航栏结构（替换Bootstrap 3旧组件） #

Bootstrap 4的折叠按钮和容器语法和Bootstrap 3完全不同，你之前用的.btn-navbar、.icon-bar都是Bootstrap 3的类，在Bootstrap 4里会直接失效，导致折叠按钮不工作，导航项直接消失。我们换成Bootstrap 4的标准组件：

<nav class="navbar navbar-expand-custom navbar-dark bg-info" style="padding: 1px; width: 100%">
  <!-- Bootstrap 4标准折叠按钮 -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <!-- 导航项折叠容器 -->
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav mr-auto">
      <a class="nav-link navLink" routerLink="/index" routerLinkActive="active"><h5>Introduction</h5></a>
      <a class="nav-link navLink" routerLink="/analysis" routerLinkActive="active"><h5>Analysis</h5></a>
      <a class="nav-link navLink" routerLink="/help" routerLinkActive="active"><h5>Help</h5></a>
      <a class="nav-link navLink" routerLink="/faq" routerLinkActive="active"><h5>FAQs</h5></a>
      <a class="nav-link navLink" routerLink="/demo" routerLinkActive="active"><h5>Demo</h5></a>
      <a class="nav-link navLink" href="http://www.zhulab.cn" routerLinkActive="active"><h5>ZhuLab</h5></a>
    </div>
  </div>
</nav>

2. 自定义1000px的折叠断点 #

Bootstrap 4默认的navbar-expand-lg是在992px以上展开，以下折叠。我们需要自定义一个断点，让导航栏在1000px时切换状态。添加以下CSS：

/* 自定义导航栏展开断点：1000px以上显示完整导航 */
@media (min-width: 1000px) {
  .navbar-expand-custom {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-custom .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-custom .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-custom .navbar-toggler {
    display: none;
  }
}

/* 1000px以下显示折叠按钮，隐藏导航项 */
@media (max-width: 999.98px) {
  .navbar-expand-custom .navbar-collapse {
    display: none !important;
  }
  .navbar-expand-custom .navbar-toggler {
    display: block;
  }
}

关键改动说明 #

• 把原来的navbar-expand-lg换成了自定义的navbar-expand-custom，这样我们可以完全控制断点逻辑，不受Bootstrap默认值限制。
• 替换了Bootstrap 3的折叠按钮为Bootstrap 4的.navbar-toggler，并添加了ARIA属性，保证页面的可访问性。
• 移除了不必要的.navbar-inner和冗余的.container嵌套，让导航栏结构更符合Bootstrap 4的规范。
• 自定义媒体查询，确保在1000px以上显示完整导航项，以下显示汉堡按钮，点击按钮就能展开所有导航文本，不会直接消失。

这样修改后，就能实现你想要的效果：页面宽度小于1000px时，导航项折叠为汉堡按钮，点击后展开显示全部文本。

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