Question

我编写此代码，并使用引导程序4将元素放入页面中：

<div class="row justify-content-center container">
<div class=" col-md-8 col-xs-8 col-lg-8 col-xl-8 col-sm-12 p-0">
    <div class="row justify-content-center col-md-12 col-xl-12 col-lg-12 col-sm-12 p-0">
        <div class="col-md-4 col-sm-4 col-xl-4 col-lg-4">
            <label>کد خبر : {{newModel.id}}</label>
        </div>
        <div class="col-md-4 col-sm-4 col-xl-4 col-lg-4">
            <label>تاریخ نوشتن خبر : 28/02/1397</label>
        </div>
        <div class="col-md-4 col-sm-4 col-xl-4 col-lg-4">
            <label>نویسنده خبر :{{newModel.writerName}}</label>
        </div>
    </div>
<div class="col-md-4 col-xs-4 col-sm-12 col-xl-4 col-lg-4 p-0 ">
    <div class="title col-md-12 col-xl-12 col-lg-12 col-sm-12 p-2 mt-1 rounded">
        <fa-icon [icon]="faPowerOff" class="right"></fa-icon>
        <span class="pr-2">پر بازدید ترین خبر ها</span>
    </div>
    <div class="mostviewcontent col-md-12 col-xl-12 col-lg-12 col-sm-12 mt-1 rounded">
        <ul class="p-0">
            <li *ngFor="let item of mostview" routerLink="/home/detail/{{item.id}}">
                <fa-icon [icon]="faCircle" class="icon"></fa-icon>
                <span>
                    {{item.title}}
                </span>
            </li>
        </ul>
    </div>
</div>
<div class="row col-md-12 col-xl-12 col-lg-12 col-sm-12 p-0">
    <nz-divider id="diver" nzText=" خبر های مشابه"></nz-divider>
    <div class=" similar col-md-3 col-xs-3 col-lg-3 col-xl-3 col-sm-12 " *ngFor="let item of similarNews">
        <div>
            <app-image [ImagePath]="item.imagePath" id="detail-img"></app-image>
        </div>
        <div>
            <label class="mt-1 lbl-sim">
                {{item.title}}
            </label>
        </div>
    </div>
</div>

但是当我在html代码中使用类row时，所有元素都放置在页面的右侧，并且在页面的左侧创建了一个空白区域。如果我需要元素恰好位于页面中间。

i使用此<html dir="rtl">

问题出在哪里？？？？我该如何解决？

Answer 1

在单独的.row元素中使用.container和div会有所帮助。

在引导程序4

1 个答案: