css - Angular/CSS : does not take formatting

Question

令我惊讶的是我的格式不被接受。如果我在索引中并添加到那里

<main role="main" class="container-fluid">
...
</main>

然后我的设计就正确显示了，“ABC”在右边。但是，如果我将它移至 app.component.html，那么格式似乎被歪曲了。起初我以为这可能是以下问题，但是 display:block; 并没有解决它:

Bootstrap style not working against Angular2 components

问题案例:

https://stackblitz.com/edit/angular-lnutdw

Answer 1

当您移动 <main> 时标记到您的组件中，然后它也被您的 <my-app> 包装来自索引的父标签。该类已正确应用，只是父标记导致它未按您希望的方式显示。

设置my-app有 width: 100%使其成为全宽或添加 container-fluid类到 my-app元素。