Question

Angular的新手。正在努力使卡片以正确的顺序显示在引导CSS布局中。

他们当前的顺序是

A F
B G
C H
D I
E J

当我将页面缩小到电话屏幕以测试响应速度时，一切都按A-J顺序进行。

在两列视图中，我希望顺序如下：

A B
C D
E F
GH
我J

我以为我可以在this answer，this page或in this answer上找到解决方案，但是我的布局仍然保持不变。

这就是我正在使用的东西：

 <div class="card-columns mt-1 mb-5">
    <div class="card" *ngFor="let group of form.formGroup">
        <!-- <div class="card"> -->
        <div class="card-header">
            <h5 class="text-uppercase">
                {{group.title}}
                <span class="float-right">
                    <i class="fas fa-edit text-primary" (click)="open(content,group)"></i>
                </span>
            </h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-sm-12" *ngFor="let control of group.fields">
                    <label class="text-uppercase"><strong>{{control.label}}</strong></label>
                    <div>
                       <button type="button" class="btn btn-lg btn-primary" disabled>{{datapersonal[control.model_property]}}</button>
                       <br><br>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我的卡没有错位，就像其他人有问题一样。只是它们的顺序错误。

Answer 1

您最外面的div使用card-columns类。这将导致以这种方式对其进行排序。删除该类，将按照您的期望对其进行排序。

<div class="mt-1 mb-5">
    <div class="card" *ngFor="let group of form.formGroup">
        <!-- <div class="card"> -->
        <div class="card-header">
            <h5 class="text-uppercase">
                {{group.title}}
                <span class="float-right">
                    <i class="fas fa-edit text-primary" (click)="open(content,group)"></i>
                </span>
            </h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-sm-12 col-lg-6" *ngFor="let control of group.fields">
                    <label class="text-uppercase"><strong>{{control.label}}</strong></label>
                    <div>
                       <button type="button" class="btn btn-lg btn-primary" disabled>{{datapersonal[control.model_property]}}</button>
                       <br><br>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

如何以正确的顺序正确对齐CSS卡（水平而不是垂直）

1 个答案: