мобильное реагирование с загрузочной сеткой и расширяемыми колонками - PullRequest
Новая
       22

мобильное реагирование с загрузочной сеткой и расширяемыми колонками

0 голосов
/ 06 марта 2019

Я создал страницу сетки начальной загрузки, и она работает так, как я хочу, на экране рабочего стола.

Моя настоящая проблема заключается в том, что когда я использую мобильный телефон, я не могу понять, как правильно упорядочить свои карты.

Вот моя логика 

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

Причина, по которой я не могу использовать строку со всеми столбцами внутри, заключается в том, что при расширении другие столбцы не сдвигаются.

Вот образец

То, что я ожидаю, это наличие столбца на мобильном телефоне в следующем порядке 

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 голосов
/ 07 марта 2019

Отлично работает, когда применяются правильные классы, такие как - 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>

Проверьте это в реальном времени здесь , попробуйте изменить размер окна вывода .

  • Снимки вывода -

1. На большом экране large screen

2. На маленьком экране

small screen*

...