Блог

На этом изображении выше есть 3 столбца с 3 полями ввода в каждом, во втором столбце удален один div, который отображается как пустое пространство, я хочу, чтобы div из следующего столбца был перенесен во 2-й столбец, и если будет другая строка, то div из столбца этой строки также должен быть сдвинут, и так далее..

Приведенное выше изображение имеет component.html

Есть ли какой-либо программный способ сделать это в файле component.ts.

Нет необходимости добавлять несколько <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>
  

Измените свой 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/