在移动设备上显示 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>
最佳答案
您可以通过将第一个 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;
}
}
关于html - 强制 bootstrap 4 nav-pills 中的第一项在合理时为全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51229569/