Bootstrap 4 Vertical Navbar

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> 

Answer 1

問題を引き起こしていたさまざまな問題があります。最新のBootstrap 4（アルファ6）では、-xs-の接尾辞が削除されているため、ちょうどcol-3と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

---

も参照してください：
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?