Bootstrap 4侧栏布局无法很好地对齐

Question

正在开发Angular SPA，从而将引导程序用作我的CSS框架。我创建了不同的组件，并将它们包含在主app.component.html文件中。除bootstrap 4侧边栏外，其他所有地方都正确对齐，我需要对其进行修复，并且应将其放置在屏幕的最左侧。

问题在于它将主体向下推。

<!--Include Navbar which works well-->
<app-navbar></app-navbar>
<div class="container">
  <!-- include sidebar-->
  <app-sidebar></app-sidebar>
  <router-outlet></router-outlet>
</div>

<div class="wrapper">
  <!-- Sidebar -->
  <nav id="sidebar">
    <div class="sidebar-header">
      <h3>Bootstrap Sidebar</h3>
    </div>

    <ul class="list-unstyled components">
      <p>Dummy Heading</p>
      <li class="active">
        <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
        <ul class="collapse list-unstyled" id="homeSubmenu">
          <li>
            <a href="#">Home 1</a>
          </li>
          <li>
            <a href="#">Home 2</a>
          </li>
          <li>
            <a href="#">Home 3</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">About</a>
      </li>
      <li>
        <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a>
        <ul class="collapse list-unstyled" id="pageSubmenu">
          <li>
            <a href="#">Page 1</a>
          </li>
          <li>
            <a href="#">Page 2</a>
          </li>
          <li>
            <a href="#">Page 3</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Portfolio</a>
      </li>
      <li>
        <a href="#">Contact</a>
      </li>
    </ul>
  </nav>

</div>