Question

我正在*ngFor部门中生成卡片。它是垂直（向下）生成它们的，但我想要角度水平（右侧）生成它们。

我的想法是放置类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

将父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，请将其删除以进行简洁的设计。

Answer 2

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

两列Angular 6 ngFor卡

2 个答案: