用 flex 布局 解决 html 中 当显示屏阔大的时候用 bootstrap 导航条不换行被遮挡
这个是 html 代码
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">YKenan</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">YKenan</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
YKenan
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">YKenan</a>
<a class="dropdown-item" href="#">YKenan</a>
<a class="dropdown-item" href="#">YKenan</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">YKenan</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">YKenan</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">YKenan</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">YKenan</a>
</li>
</ul>
</div>
</nav>
这个是 css 代码
/* 添加 下面的 内容 */
.navbar-nav {
margin: 8px auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
align-content: space-between;
}
.navbar>.collapse:not(.show) {
display: block;
}