1
.dashBoard {
width: 250;
height: 100vh;
background-color: mediumaquamarine;
}
.navbar-nav > li > .nav-link {
font-size: 18px;
color: black;
padding-top: 0px !important;
padding-bottom: 2px;
padding-left: 10px;
}<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/coreStyleSheet.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-10 col-md-3 col-lg-3 col-sm-6">
<div class="dashBoard animated slideInLeft" id="navbarToggleExternalContent">
<ul class="navbar-nav">
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Module 1
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Module 2
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Module 3
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>我有一个侧栏nav这是在左边，所有的项目都放在下面的其他，我有一个下拉，但问题是当我点击它作为一个弹出式窗口，我希望是下拉的点击下面的项目应该下移和列表显示出现。
我想是这样的
请指引我实现这一目标。
我转换你的代码片断，你可以把它一点点接近你所描述的为你的现状如何？ –
我使用引导程序4并从这里运行代码段不是我当前的状态。让我为你摆好小提琴。稍等片刻。 – Rehan
您可以在SO上包含外部资源到片段，它几乎和小提琴一样好。 –