合理时强制引导程序4导航丸中的第一项变为全宽

Question

我有理由在移动设备上显示导航丸时遇到问题。例如，使用以下代码，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来设置flex-basis个nav-item到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;
  }
}

提琴：https://jsfiddle.net/aq9Laaew/75802/