html - 在合理的情况下强制引导 4 nav-pills 中的第一项为全宽

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>

标签： htmlcsstwitter-bootstrapbootstrap-4

Answer 1

您可以通过将第一个nav-item的宽度设置为 100% 并将其重置flex-basis为.nav-justified将s 的设置flex-basis为nav-item0 来做到这一点。

.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/