Bootstrap 使用 Row & Col 和 Angular 列表排序

Question

在 bootstrap 和 angular 中是否有办法将列表拆分为这样的列，请注意它会将前 4 个条目放入第一列，然后再填充第二列。

a     e
b     f
c     g
d     h

这是我的示例代码，它没有按所需的顺序排列它们：

<div class="row">
    <div class="col-6" *ngFor="let item of ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']">
        {{ item }}
    </div>
</div>

像这样的输出，你可以看到字母的顺序不正确，它是逐行做的：

a     b
c     d
e     f
g     h

Answer 1

响应式地拆分阵列将非常困难。一种更简单的方法是使用 Bootstrap 4 card-columns 而不是网格列。这将使数据从上到下排序并分成列。那么你只需要一个 CSS 媒体查询就可以在更大的屏幕上拥有 3 列而不是 2 列。

<div class="card-columns">
     <div ng-repeat='item in items'>
         {{$index+1}} {{ item.name }}
     </div>    
</div>

.card-columns {
    column-count: 2;
}

@media (min-width: 768px) {
    .card-columns {
        column-count: 3;
    }
}

https://www.codeply.com/go/3UBWN6Hc3k

Answer 2

您不希望列上的 for 循环，您只需要 两个 列。

因此，您希望在列 inside 的内容上使用 for 循环，而在 first 列中您想要列表的前半部分 (i <= items.length / 2)

和

在 second 列中您想要列表的后半部分 (i > items.length / 2)

let items: Array<string> = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];

<div class="row">
    <div class="col-md-6">
        <div  *ngFor="let item of items; let i = index">
            <span *ngIf="i < items.length/2">{{ item }}</span>
        </div>
    </div>
        <div class="col-md-6">
            <div  *ngFor="let item of items; let i = index">
                <span *ngIf="i >= items.length/2">{{ item }}</span>
            </div>
        </div>
    </div>
</div>

更新 - 响应式

PLUNKER DEMO

HTML

<ul>
  <li *ngFor="let item of items">{{item}}</li>
</ul>

CSS

/* Any media less than 300px screen width will shrink into a 1 column list  */

@media screen and (min-width: 300px) {
  ul {
    column-count: 2;
    column-gap: 0;
    width: 100%;
    list-style-type: none;
    padding: 0;
  }
}
@media screen and (min-width: 992px) {
  ul {
    column-count: 3;
    column-gap: 0;
    width: 100%;
    list-style-type: none;
    padding: 0;
  }
}

li {
  display: inline-block;
  width: 100%;
  text-align: center;
}

Answer 3

let listItems: string[] = ['a', 'b', 'c', 'd', 'e', 'f','g'];

<div class="row">
  <ng-container *ngFor="let item of listItems; let i = index">
    <div *ngIf="i < listItems.length/2" class="col-6">
        {{ item }}
    </div>
    <div *ngIf="i >= listItems.length/2" class="col-6">
        {{ item }}
    </div>
  </ng-container>
</div>