我正在尝试创建一个在某个断点处折叠的垂直导航栏.我已经将它解决了崩溃的程度,但不知怎的,我在下一篇专栏文章中的内容没有得到正确的叠加.
<div class="row">
<div class="col-xs-3 col-sm-2 col-md-2 col-lg-1 col-xl-1">
<div class="container">
<nav class="nav navbar-light navbar-toggleable-sm">
<button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarW" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse flex-column" id="navbarWEX">
<a class="navbar-brand active" href="~/Views/Forms/ControlPanel.cshtml"><span class="fa fa-home"></span></a>
@Html.ActionLink("Create User","Register","Account",new { @class = "nav-link" })
</div>
</nav>
</div>
</div>
<div class="col-xs-9 col-sm-10 col-md-10 col-lg-11 col-xl-11">
<h2>Hello There</h2>
<p>Test test test test test test test </p>
</div>
</div>
谁能指出我在这里做错了什么？
更新：谢谢@Zimsystem.以下是我想出的：
<div class="row h-100">
<div class="col-2 collapse d-md-flex pt-2 h-100" id="sidebar">
<nav class="nav flex-column">
<a class="navbar-link active" href="~/Forms/ControlPanel"><span class="fa fa-home fa-3x ml-3"></span></a>
@Html.ActionLink("Create User",new { @class = "nav-link" })
@Html.ActionLink("Manage Users","ManageUsers",new { @class = "nav-link" })
</nav>
</div>
<div class="col pt-2" id="wLayout">
<p>Test test test test test test test </p>
</div>
</div>
解决方法
存在导致问题的各种问题.在最新的Bootstrap 4(alpha 6)中,-xs-中缀已被删除,因此它只是col-3和col-9,这导致了叠加问题.此外,不应在容器内使用容器.
<div class="container-fluid">
<div class="row">
<div class="col-3 col-sm-2 col-md-2 col-lg-1 col-xl-1">
<nav class="nav navbar-light navbar-toggleable-sm">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarWEX" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse flex-column mt-md-0 mt-4 pt-md-0 pt-4" id="navbarWEX">
<a class="nav-link navbar-brand active" href="~/Views/Forms/ControlPanel.cshtml"><span class="fa fa-home"></span></a>
<a href="" class="nav-link">Linnk</a>
<a href="" class="nav-link">Linnk</a>
<a href="" class="nav-link">Linnk</a>
</div>
</nav>
</div>
<div class="col-9 col-sm-10 col-md-10 col-lg-11 col-xl-11">
<h2>Hello There</h2>
</div>
</div>
</div>
http://www.codeply.com/go/j9esYkO7Dt
另见：
Bootstrap 4: responsive sidebar menu to top navbar
How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
How to create a responsive navbar side drawer in Bootstrap 4?
