移动响应式自举网格和可扩展列

时间:2019-03-06 14:09:45

标签: html angular responsive-design bootstrap-4 bootstrap-grid

我已经创建了一个引导网格页面,并且可以在桌面屏幕上正常运行。

我的实际问题是,当我使用移动设备时,我无法正确地对卡进行重新排序。

这是我的逻辑

<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>

1 个答案:

答案 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 尝试调整输出窗口的大小

  • 输出快照-

1。在大屏幕上 large screen

2。在小屏幕上

small screen *