Bootstrap 4垂直导航栏

Question

我正在尝试创建一个在某个断点处折叠的垂直导航栏。我已经将它工作到了折叠的点，但是我的下一列内容却没有正确地堆叠起来。

<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", "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>

- Ratan

Answer 1

有各种问题导致了一个问题。在最新的Bootstrap 4（alpha 6）中，已经删除了-xs-中缀，所以现在只需要使用col-3和col-9，这导致了覆盖问题。此外，在col-内部不应该使用container。

<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 Beta 3（及更高版本）中，navbar-toggleable-*被替换为navbar-expand-*。

---

另请参阅：
Bootstrap 4：将响应式侧边栏菜单转换为顶部导航栏
如何使用CSS position sticky在Bootstrap 4中保持侧边栏可见
如何在Bootstrap 4中创建响应式的导航栏侧边抽屉?

- Zim