Угловая 6 нгДля карты в две колонки

Question

Я генерирую карты в моем *ngFor div.Он генерирует их вертикально (вниз), но я хочу, чтобы угловые генерировали их горизонтально (справа).

Моя идея состояла в том, чтобы поместить класс col-6, но это не работает, просто кладет половину карты друг под друга.

Это код:

<div class="card-body">
<div class="card" *ngFor="let BLA of PACKAGE.blas; let index=index" class="p-1">
<div class="card">
    <div class="card-header">
        Header
    </div>
    <div class="card-body">
        <div class="form-group row">
            <div class="col-12">
                {{bla.somethingone}}
            </div>
        </div>
        <div class="form-group row">
            <div class="col-12">
                {{bla.somethingtwo}}
            </div>
        </div>
        <div class="form-group row">
            <div class="col-12">
                {{bla.somethingthree}}
            </div>
        </div>
    </div>
</div>
</div>

Вот что у меня есть:

И я хочу это:

Я пытался добавить col-6 к классам, но он не отвечает,Как мне добиться этого эффекта?

Answer 1

Это не имеет никакого отношения к Angular, используйте display: flex на card-body и установите flex-wrap: wrap; и flex-direction: row;:

.card-data {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.card {
  width: 40%;
  height: 100px;
  line-height: 100px;
  background-color: grey;
  margin: 10px;
  color: white;
  text-align: center;
  vertical-align: middle;
}

<div class="card-data">
  <div class="card">
    card 1
  </div>
  <div class="card">
    card 2
  </div>
  <div class="card">
    card 3
  </div>
</div>

Answer 2

Измените родительский класс div на row и добавьте класс col-6 в строку карты, в которой работает ваш цикл

<div class="row">
<div class="card col-6 p-1" *ngFor="let BLA of PACKAGE.blas; let index=index">
<div class="card">
    <div class="card-header">
        Header
    </div>
    <div class="card-body">
        <div class="form-group row">
            <div class="col-12">
                {{bla.somethingone}}
            </div>
        </div>
        <div class="form-group row">
            <div class="col-12">
                {{bla.somethingtwo}}
            </div>
        </div>
        <div class="form-group row">
            <div class="col-12">
                {{bla.somethingthree}}
            </div>
        </div>
    </div>
</div>
</div>

У вас также есть дополнительный card div под циклом, удалите его для чистого дизайна.