移动响应式自举网格和可扩展列 [英] mobile responsive with bootstrap grid and expandable columns

问题描述

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

我的实际问题是使用移动设备时，我无法了解

这是我的逻辑

  < div class = row> 
< div * ngFor =让[1,2]的col；让index = index class = col-12 col-sm-6 col-xl-6> 
< div * ngFor =让卡牌；让indexC = index class ='col-sm-12'> 
< app-expend [card] = card * ngIf = indexC％2 === index< / app-expend> // card [1] = Hi1 
< / div> 
< / div> 
< / div> 
  

我无法使用包含所有列的行的原因是当我展开其他列时

这里是一个

2。在小屏幕上

*

I have created a bootstrap grid page and it's working as I want on desktop screen.

My actual problem is when I use mobile, I can't get how to reorder my cards in right way.

Here's my logic

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

The reason why I can't use a row with all colums inside is that When I expand other columns don't shift.

Here's a sample

What I expect is having column on mobile in this order

Hi1                Hi1
Hi2                Hi3
Hi3   Instead of   Hi5
Hi4                Hi2
Hi5                Hi4
Hi6                Hi6

And in desktop ( already done ) :

Hi1  Hi2  
Hi3  Hi4
Hi5  Hi6

the code should looks like something like this

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

解决方案

It works perfectly when applied proper classes like - col-xl-6 col-lg-6 col-md-6 col-sm-12. So your snipper would be -

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

Check it live here, try resizing the output window.

• Snaps of output -

1. On large screen

2. On small screen

*

这篇关于移动响应式自举网格和可扩展列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！