CSS Bootstrap 4 垂直导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42789421/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 Vertical Navbar
提问by Ratan
I am trying to create a vertical navbar which collapses at some breakpoint. I have it working up to the point where it collapses, but somehow my content from the next column is not getting stacked up properly.
我正在尝试创建一个在某个断点处折叠的垂直导航栏。我让它一直工作到崩溃的程度，但不知何故，我下一栏中的内容没有正确堆叠。
<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>
Can someone point out what I am doing wrong here?
有人可以指出我在这里做错了什么吗？
Update: Thank you @Zimsystem. Below is what i came up with:
更新：谢谢@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", "Register", "Account", new { @class = "nav-link" })
@Html.ActionLink("Manage Users", "ManageUsers", "Account", new { @class = "nav-link" })
</nav>
</div>
<div class="col pt-2" id="wLayout">
<p>Test test test test test test test </p>
</div>
</div>
采纳答案by Zim
There are various issues that were causing a problem. In the latest Bootstrap 4 (alpha 6) the -xs-infix has been removed so it's just col-3and col-9, and that was causing the overlay problem. Also, containershouldn't be used inside col-.
有各种各样的问题导致了问题。在最新的 Bootstrap 4 (alpha 6) 中，中-xs-缀已被删除，因此它只是col-3and col-9，这导致了覆盖问题。此外，container不应在col-.
<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
http://www.codeply.com/go/j9esYkO7Dt
Note: navbar-toggleable-*was replaced with navbar-expand-*in Bootstrap 4 Beta 3 (and newer).
注意：在 Bootstrap 4 Beta 3（和更新版本）中navbar-toggleable-*被替换了navbar-expand-*。
Also see:
Bootstrap 4: responsive sidebar menu to top navbar
How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
Create a responsive navbar sidebar "drawer" in Bootstrap 4?
另请参阅：
Bootstrap 4：顶部导航栏的响应式侧边栏菜单
如何使用 CSS 位置粘性以通过 Bootstrap 4 保持侧边栏可见 在 Bootstrap 4 中
创建响应式导航栏侧边栏“抽屉”？
