如果在角度6中从该列删除了一个div，如何将现有的div从一列推到另一列

Question

在上面的这张图片中，有3列，每个列有3个输入字段，在第二列中，一个div被删除，显示为空白，我希望将下一列的div移到第二列，如果有是另一行，然后该行的列中的div也被移动，等等。

上图为component.html

如果在component.ts文件中有任何编程方式可以做到这一点。

Answer 1

无需添加多个<div class="row">使其变得简单。谢谢

<div class="row">
  <div class="col-sm-4" *ngIf="isCompanyname">
    <div class="form-group"></div>
  </div>
  <div class="col-sm-4" *ngIf="isRatingstatus">
    <div class="form-group"></div>
  </div>
  <div class="col-sm-4" *ngIf="isIndustry">
    <div class="form-group"></div>
  </div>
  <div class="col-sm-4" *ngIf="isClientclassificationbd">
    <div class="form-group"></div>
  </div>
  <div class="col-sm-4" *ngIf="isSector">
    <div class="form-group"></div>
  </div>
  <div class="col-sm-4" *ngIf="isSubindustry">
    <div class="form-group"></div>
  </div>
  <div class="col-sm-4" *ngIf="isCompanycode">
    <div class="form-group"></div>
  </div>
  <div class="col-sm-4" *ngIf="isIndustrygroup">
    <div class="form-group"></div>
  </div>
  <div class="col-sm-4" *ngIf="isSilmapping">
    <div class="form-group"></div>
  </div>
</div>

Answer 2

更改您的HTML

<div class="container">
  <div class="row">
    <div class="col-sm-4" *ngIf="isCompanyname">
        <div class="form-group">
          <input class="form-control" />
        </div>
    </div>
     <div class="col-sm-4">
        <div class="form-group">
          <input class="form-control" />
        </div>
    </div>
   <div class="col-sm-4">
        <div class="form-group">
          <input class="form-control" />
        </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4" *ngIf="isCompanyname">
        <div class="form-group">
          <input class="form-control" />
        </div>
    </div>
     <div class="col-sm-4">
        <div class="form-group">
          <input class="form-control" />
        </div>
    </div>
   <div class="col-sm-4">
        <div class="form-group">
          <input class="form-control" />
        </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4" *ngIf="isCompanyname">
        <div class="form-group">
          <input class="form-control" />
        </div>
    </div>

    <div class="col-sm-4">
        <div class="form-group">
          <input class="form-control" />
        </div>
    </div>
  </div>
</div>

https://jsfiddle.net/7u96mhp3/1/