将 sidenav 添加到 Angular 项目 [关闭]答案

【问题标题】：Adding sidenav to Angular project [closed]将 sidenav 添加到 Angular 项目 [关闭]
【发布时间】：2020-09-05 10:13:22
【问题描述】：

我正在尝试将Angular Material sidenav 添加到我的Angular 8 应用程序中。

我能够让Angular Material sidenav 出现在我现有的SPA 登录页面的左侧。现在的问题是，虽然侧面导航应该在左侧，但它会导致一些问题我现有的组件有问题。

<section><nav>
<app-header></app-header>
</nav>
<div class="container">
<br>
<app-weather></app-weather> //where the sidenav is located
<app-home></app-home> //my bootstrap carousel with images
<br>
<app-bio></app-bio>
<br>
<app-date-time></app-date-time>
<router-outlet></router-outlet>
</div>
</section>

我不再看到我的导航栏，我的 bootstrap 轮播被向下推，图像几乎没有显示（我只看到轮播图像占位符所在的底部）。

我尝试使用 CSS justify-content/position 将侧边栏推向左侧，但这对我不起作用。

有人知道我怎样才能让它工作吗？

【问题讨论】：

标签： html css angular angular-material

【解决方案1】：

我转到侧导航容器的 css 文件并在“右”添加了一些像素。这样做会将侧导航放在导航栏的左侧（现在出现）。我现在可以完美地看到引导轮播中的图像。

    .example-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 5;

}

【讨论】：