用 flex 布局 解决 html 中 当显示屏阔大的时候用 bootstrap 导航条不换行被遮挡

用 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;
}