如何仅使用 CSS 设计 Angular 响应式组件

Question

我正在设计Angular组件主布局by default it is responsive，其中包含以下组件...

1. 导航组件
2. 侧边栏组件
3. 主要组件
4. 容器组件

问题如下图所示...

我的app.component.html的结构是

<app-navbar></app-navbar>
<app-main>
   <app-sidebar> </app-sidebar>
   <app-container> 
      <app-card> </app-card>
   </app-container>
   <app-container>  
      <app-card> </app-card>
   </app-container>
</app-main>

我也在这里使用内容投影。每次我重新使用 <app-container> 时，这将被视为主要组件内的新 row。现在我面临的问题是当我第二次使用<app-container> 时，它显示在正下方的侧栏组件之外。

我想在侧边栏组件的右侧显示每个<app-container>。每次新组件都必须显示为新行。

注意：目前我没有使用任何 CSS 框架，我需要在不使用任何 CSS 框架的情况下解决这个问题，只使用行 CSS 类。

我在Stackblitz Link这里分享项目链接

这里我正在做如何设计我们自己的角度组件，任何人都可以提出关于如何做到这一点的最佳实践作为响应。

Answer 1

我建议你将所有内容投射到你的 sidenav 中，并使用一点 CSS 你会得到你想要的。

看看this demo。我已经添加了你需要的 CSS。