【发布时间】：2019-05-20 10:38:09
【问题描述】：
我在尝试创建菜单时遇到问题。我有点像旧的引导程序，但是这整个 flex-thingy 让我感到困惑。所以，我想要一个 80 像素的深色垂直侧边菜单，屏幕的其余部分应该是一个“工作区”。我的问题是侧面菜单中的项目没有全宽（见下面的边框），我似乎不知道为什么不这样做。我现在猜测，它与 flexbox 有关——一个项目只占用它需要的空间。我已经从 bootstrap 4 网站复制了代码并进行了一些修改。但最后一点，我可以在项目上获得全宽 - 我错过了。
.nav-item{
color:#FEFEFE!important;
border-bottom:1px solid #666;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Ticket</title>
</head>
<body>
<div class="container-fluid" style="height:100%">
<div class="row" style="height:100%">
<div class="col-sm-2 col-md-2 col-lg-1 col-xl-1" style="padding:0px!important;height:100%">
<nav class="navbar navbar-expand-sm px-0 flex-row " style="background-color:#333;height:100%;">
<div class="navbar-collapse collapse" id="navbarWEX">
<div class="nav flex-column">
<a routerLink="/" class="nav-item">Home</a>
<a routerLink="/first" class="nav-item">First Item</a>
<a routerLink="/second" class="nav-item">Second Item</a>
</div>
</div>
</nav>
</div>
<div class="col py-2">
<h2>Hello There</h2>
<p>Test test test test test test test</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>【问题讨论】：
-
澄清一下，您希望您的菜单占据移动设备上视口的整个宽度吗？所以你的主要内容被推到菜单下面？还是您只是希望每个导航链接都跨越黑色菜单容器的整个宽度？
-
在导航上使用
w-100....class="nav w-100 flex-column"
标签： html css flexbox bootstrap-4