角度 *ngFor 引导列最后一个溢出到下一列答案

【问题标题】：angular *ngFor bootstrap columns last one overflowing to next column角度 *ngFor 引导列最后一个溢出到下一列
【发布时间】：2019-02-19 18:00:36
【问题描述】：

我有不同大小的内容到 ngFor 循环并填充响应式 3 列（内容需要向下流动而不是溢出）模态体。第一列和第二列中的最后一项被截断并流向下一列的开头。如何将每个分组的内容保持在一起？有没有办法检查此列的内容是否不适合此列的底部，然后将整个内容移至下一个？这是响应式的，因为随着宽度的缩小，它将转换为 2 列，然后转换为 1 列，因此它需要保持动态填充循环。

代码：

<div class="modal-body">
    <div class="m-4">
    <div class="columns">
        <div class="green" *ngFor="let cat of categories;let index = index;">
          <div class="row no-gutters justify-content-left text-left">
            <span class="cat-title">title {{index}}</span>
            <span class="cat-subtitle" *ngIf="cat.subtitle">&nbsp;subtitle</span>
          </div>
          <div class="row no-gutters justify-content-left text-left nom-name" *ngIf="cat.iPicked">
            <span>winner picked</span>
          </div>                
          <hr/>              
        </div>
    </div>
  </div>
</div> <!-- end modal body -->

CSS：

.ballot-body {
height: 600px;
}
@media only screen and (min-width: map-get($grid-breakpoints, xs)) {
#title {
    font-size: medium;
}
.columns {
    columns: 1;
}

-- 随着断点的增长，列增长到 2，然后增长到 3

【问题讨论】：

标签： css bootstrap-4 multiple-columns angular7

【解决方案1】：

你可以使用CSS GRID来解决这个问题，.columns 类应该有一个display: grid; 属性。

.columns {
  width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 30px;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr 1fr;
  
}

.features-1, .features-2, .features-3  {
  background: red;
}

<div class="columns">
  <div class="features-1">
      Feature 1
  </div>
  <div class="features-2">
    Feature 2
  </div>
  <div class="features-3">
    Feature 3
  </div>
  <div class="features-3">
    Feature 3
  </div>
  <div class="features-3">
    Feature 3
  </div>
  <div class="features-3">
    Feature 3
  </div>
  <div class="features-3">
    Feature 3
  </div>
  <div class="features-3">
    Feature 3
  </div>
  <div class="features-3">
    Feature 3
  </div>
</div>

【讨论】：

【解决方案2】：

在尝试了建议的方法后，我仍然遇到布局问题。还是）感谢你的建议！它提供了丰富的信息，因为它让我了解存在哪些 CSS 网格选项。

最后，因为我的内容具有未知的不同高度并且它需要响应（3 cols、2 cols、1 col），我选择在我的列表上执行常规*ngFor，在它被重新索引后根据窗口大小。现在，每个单独的分组在循环时都保持在一起。

 ------- parent component --------
// when screen is resized, control how the categoryArray is sorted (1, 2, 3 columns)
@HostListener('window:resize', ['$event'])
onresize() {
  this.changeCategoryArray(window.innerWidth);
}

changeCategoryArray(innerWidth) {
    let arrayToUse = [];

    if (innerWidth >= 992) {
      if (this.currentNumberOfColumns !== 3) {
        this.currentNumberOfColumns = 3;
        arrayToUse = this.threeColArray;
      }
    } else if (innerWidth < 992 && innerWidth >= 576) {
       if (this.currentNumberOfColumns !== 2) {
        this.currentNumberOfColumns = 2;
        arrayToUse = this.twoColArray;
       }
    } else if (innerWidth < 575) {
       if (this.currentNumberOfColumns !== 1) {
        this.currentNumberOfColumns = 1;
        arrayToUse = this.oneColArray;
       }
    }
    // only change it if it is not already set to the this number of columns
    if (arrayToUse.length) {
      for (let i = 0; i < this.categories.length; i++) {
        this.newCategoryArray[arrayToUse[i]] = this.categories[i];
      }
    }
}

------------html----------
<div class="modal-body">
    <div class="row m-4">
        <div class="col-12 col-sm-6 col-lg-4" *ngFor="let item of newCategoryArray">
            <ballot-category [categoryItem]="item"></ballot-category>
        </div>
    </div>
</div> <!-- end modal body -->

-----<ballet-category>------
<div class="pl-4 pr-4">
   <div class="justify-content-sm-start justify-content-center text-sm-left text-center">
     <span class="cat-title" [ngClass]="{'title-notPicked': !categoryItem.iPicked}">{{categoryItem.name}}</span>
     <span class="cat-subtitle" *ngIf="categoryItem.subtitle" [ngClass]="{'title-notPicked': !categoryItem.iPicked}">&nbsp;{{categoryItem.subtitle}}</span>
   </div>
   <div class="justify-content-sm-start justify-content-center text-sm-left text-center nom-name" *ngIf="categoryItem.iPicked">
     <span>{{categoryItem.nomPicked}}</span>
   </div>
   <div class="justify-content-sm-start justify-content-center text-sm-left text-center nom-name-notPicked" *ngIf="!categoryItem.iPicked">
     <span>/// Not chosen yet ///</span>
   </div>
   <hr />
</div>

【讨论】：