行类在角度模板中不起作用答案

【问题标题】：row-class not working in angular template行类在角度模板中不起作用
【发布时间】：2020-10-26 13:54:40
【问题描述】：

我有这个工作正常的模板。

但是当我想在一个组件中分离单个课程（或产品）时，row-class 不能正常工作并且项目在彼此之下......

这是我的代码：

<div class="col-lg-9">
    <div class="row">
        <app-single-course></app-single-course>
        <app-single-course></app-single-course>
    </div>
</div>

更新

这是没有单个组件的代码，如果我复制它，它们工作正常，它们并排显示。

            <div class="col-lg-9">
            <div class="row">

                <div class="col-lg-4 col-md-6">
                    <div class="single-course-inner style-two">
                        <div class="thumb">
                            <img src="assets/img/course/2.png" alt="img">
                            <div class="rating">4.9/5 <i class="fa fa-star"></i></div>
                            <a href="#" class="bookmark"><i class="fa fa-bookmark-o"></i></a>
                        </div>
                        <div class="details">
                            <div class="meta">
                                <div class="row">
                                    <div class="col-6">
                                        <p>5,957 students</p>
                                    </div>
                                    <div class="col-6 text-right">
                                        <p>01h 49m</p>
                                    </div>
                                </div>
                            </div>
                            <h5><a href="#">Motion Graphics: Create a Nice Typography Animation</a></h5>
                            <div class="price-inner">
                                <div class="row">
                                    <div class="col-6">
                                        <p>$33.99</p>
                                    </div>
                                    <div class="col-6 text-right">
                                        <a href="#"><i class="fa fa-shopping-cart"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

【问题讨论】：

行类是在哪里定义的？
在 vendor.css 中

标签： css angular

【解决方案1】：

您可以将类 (row) 添加到新组件标签 (app-single-course)

<app-single-course class="row"></app-single-course>

【讨论】：

从类名来看，我猜 OP 想要并排显示组件。给child加row类如何解决问题？
这不是我想要的

【解决方案2】：

我想您可能会谈论引导网格系统。好吧，首先 col 类位于 row 类中，否则您将始终拥有“彼此下方”的项目。这是带有示例的文档：https://getbootstrap.com/docs/4.5/layout/grid/

【讨论】：

你能分享你的答案的代码吗？这是在共享链接的内容更改或移动到其他地方的情况下。最好在你对 stackoverflow 的回答中有一些代码。