html - 强制 bootstrap 4 nav-pills 中的第一项在合理时为全宽

Question

在移动设备上显示 nav-pills 时我遇到了问题。例如，使用以下代码，iPhone 会显示对齐的选项卡，但在两行上带有“It NavTab”药丸。是否可以让第一个导航栏全宽显示，并在第一个导航栏下方对齐最后两个导航栏？请指教。谢谢!

<ul class="nav nav-pills nav-justified">
    <li class="nav-item"><a class="nav-link active" href="#">Hello!</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Testing!</a></li>
    <li class="nav-item"><a class="nav-link" href="#">It NavTab</a></li>
</ul>

Answer 1

您可以通过将第一个 nav-item 的宽度设置为 100% 并将其 flex-basis 重置为 .nav-justified 将 nav-item 的 flex-basis 设置为 0。

.nav-justified .nav-item .nav-link {
  white-space: nowrap;
}

@media (max-width: 767px) {
  .nav-justified .nav-item:first-child {
    width: 100%;
    flex-basis: auto;
  }
}

fiddle :https://jsfiddle.net/aq9Laaew/75802/