如何使用 Angular 并排获取组件？

Question

请向新手解释这个简单的事情。

所以我在 Angular 中制造了 3 个三个组件：

• App.Component（自动出现）
• 狗组件
• 猫组件

猫和狗组件包含这些动物的一张图像。

问题：当我想将 cat & dog 组件并排放置（不在下方）时，如何以及在何处放置代码片段？ Index.html/styles.css？ 还是 App.Component？ 或者？

如您所见，此时我可能对这种结构有些迷茫……

Answer 1

您可以使用 div 创建包装器，然后在 CSS 中应用 styles，这将使组件并排。

例子

在您的应用程序组件 HTML 中：

<div class="app-container">
   <dog-component></dog-component>
   <cat-component></cat-component>
</div>

应用组件 CSS：

.app-container {
   display: flex;
}

Answer 2

我使用引导程序并排显示图像。

 <div class="col-md-12 col-sm-12"> <div class=" col-md-6 col-sm-6"> <dog-component></dog-component> </div> <div class=" col-md-6 col-sm-6"> <cat-component></cat-component> </div> </div>