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

我有这个模板，这是工作良好

但是，当我想在一个组件中分离单个课程（或产品）时，

行

-类不能正常工作，并且项目在彼此下面

这是我的代码：

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

5957名学生

01h 49m

33.99美元

您可以将类（

行

）添加到新的组件标签（

应用程序单一课程

）

---

我想你可以谈谈引导网格系统。 首先，col类位于row类内部，否则您将始终拥有项“在彼此之下”。

---

以下是示例文档：

行类是在哪里定义的？它在vendor.css中。从类名来看，我想OP希望并排显示组件。向孩子添加一个row类如何解决这个问题？这不是我想让你分享答案代码的原因。这是在共享链接的内容更改或移动到其他位置的情况下发生的。最好在关于stackoverflow的答案中包含一些代码。

            <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>

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