我已经创建了一个引导网格页面,并且可以在桌面屏幕上正常运行。
我的实际问题是,当我使用移动设备时,我无法正确地对卡进行重新排序。
这是我的逻辑
<div class="row">
<div *ngFor="let col of [1,2]; let index=index" class="col-12 col-sm-6 col-xl-6">
<div *ngFor="let card of cards; let indexC=index" class='col-sm-12' >
<app-expend [card]="card" *ngIf="indexC%2===index"></app-expend> //card[1] = Hi1
</div>
</div>
</div>
之所以不能在内部包含所有列的行中使用,是因为当我展开其他列时不要移动。
这里是sample
我希望按此顺序在移动设备上有专栏
Hi1 Hi1
Hi2 Hi3
Hi3 Instead of Hi5
Hi4 Hi2
Hi5 Hi4
Hi6 Hi6
在台式机中(已经完成):
Hi1 Hi2
Hi3 Hi4
Hi5 Hi6
代码应该看起来像这样
<div class="row">
<div *ngFor="let card of cards; let indexC=index" class='col-sm-12' >
<app-expend [card]="card"></app-expend> //card[1] = Hi1
</div>
</div>
答案 0 :(得分:0)
当应用适当的类-col-xl-6 col-lg-6 col-md-6 col-sm-12
时,它可以完美工作。所以你的狙击手是-
<div class="row m-2">
<div *ngFor="let card of cards; let indexC=index" class='col-xl-6 col-lg-6 col-md-6 col-sm-12' >
<app-expend [card]="card"></app-expend>
</div>
</div>
实时检查它 here ,尝试调整输出窗口的大小。
2。在小屏幕上