[英]How do I get the components side by side using Angular?
Please, explain this simple thing to the novice.请向新手解释这个简单的事情。
So I have 3 three components made in Angular:所以我在 Angular 中制造了 3 个三个组件:
The cat and dog components contain one images of these animals.猫和狗组件包含这些动物的一张图像。
Question: How and where do I put the code snippet when I want to get the cat & dog components side by side(not below)?问题:当我想将 cat & dog 组件并排放置(不在下方)时,如何以及在何处放置代码片段? Index.html/styles.css?
Index.html/styles.css? or App.Component?
还是 App.Component? or?
或者?
As you can see, I may be a little lost with this structure at this point...如您所见,此时我可能对这种结构有些迷茫……
You can create a wrapper using a div and then apply the styles in CSS that will make the components be side by side.您可以使用 div 创建包装器,然后在 CSS 中应用 styles,这将使组件并排。
Example例子
In your App component HTML:在您的应用程序组件 HTML 中:
<div class="app-container">
<dog-component></dog-component>
<cat-component></cat-component>
</div>
App component CSS:应用组件 CSS:
.app-container {
display: flex;
}
I have used bootstrap to display image side by side.我使用引导程序并排显示图像。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.