如何使用 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>