html - 如何以正确的顺序正确对齐 CSS 卡(水平，而不是垂直)

Question

Angular 新手。致力于让卡片在 bootstrap CSS 布局中以正确的顺序显示。

他们目前的顺序是

• A F
• BG
• CH
• D我
• EJ

当我将页面压缩到手机屏幕上测试响应时，一切都按 A-J 顺序排列。

在两列 View 中，我希望顺序是这样的:

• A B
• CD
• 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>