“ nav nav-pills nav-justified”类未堆叠用于移动设备视图的标签

Question

我正在使用angular的最新引导程序版本。当屏幕尺寸减小到768px以下时，“ nav nav-pills nav-justified”类不会堆叠标签。

我提到了站点http://jsfiddle.net/koala_dev/73rNv/。在帖子中。在堆栈溢出中，我遵循了Justify Nav-pills with Bootstrap v4，但它也可以正常工作

这是我的HTML代码

<div class="container">
      <ul class="nav nav-pills nav-justified">
        <li class="nav-item">
          <a class="nav-link" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" routerLink="/">Feeds</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLinkActive="active" [routerLink]="['/status-update']">Status Update</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLinkActive="active" [routerLink]="['/goal-setting']">Goal Setting</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLinkActive="active" [routerLink]="['/meet-up']">Meet up</a>
        </li>
      </ul>
</div>

我不明白为什么它在http://jsfiddle.net/koala_dev/73rNv/中有效，而我的情况下相同的代码也失败了。请指教。

Answer 1

经分析，我们发现：

• http://jsfiddle.net/koala_dev/73rNv/中的Bootstrap版本为3.1.1
• stackoverflow示例中的Bootstrap版本是未知的（发布日期为2015年），但是有一个更新引用了this page
• 我们看到BS4中提供了类nav-pills nav-fill ...要从导航的每一行中获取药丸，我们可以自己编写一些CSS

在以下Bootstrap 4.3.1上

工作片段：

@media screen and (max-width: 768px) {
  .nav-fill .nav-item {
    width: 100% !important;
    flex-basis: unset !important;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container-fluid">

  <ul class="nav nav-pills nav-fill">
    <li class="nav-item ">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>