时间戳

首页 > 解决方案 > 行类在角度模板中不起作用

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

问题描述

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

但是当我想在一个组件中分离单个课程（或产品）时，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>

标签： cssangular

解决方案

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

推荐阅读