如何在Bootstrap与Angular中实现列表先填列再换行的列布局？

Got it, let's break down why your current code isn't working and how to fix it to get the column order you want (a b c d in the first column, e f g h in the second, rendering as side-by-side columns with matching rows).

What's Wrong with Your Current Code? #

Your current template creates a new .col-6 for every item in the array:

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

Bootstrap's grid system works row-first—so it fills the first row with two .col-6 elements (a and b), then the next row with c and d, and so on. That's why you're not getting the column-wise order you expect.

Solution 1: Split the Array into Two Column Groups (Best for Fixed Sizes) #

The most straightforward fix is to split your original array into two sub-arrays (first 4 items, last 4 items) and render each group in its own full .col-6 container.

First, split the array in your Angular component:

// In your component.ts
items = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
firstColumn = this.items.slice(0, 4); // Gets ['a', 'b', 'c', 'd']
secondColumn = this.items.slice(4); // Gets ['e', 'f', 'g', 'h']

Then update your template to render each column group:

<div class="row">
  <!-- First column: first 4 items -->
  <div class="col-6">
    <div *ngFor="let item of firstColumn">{{ item }}</div>
  </div>
  <!-- Second column: remaining items -->
  <div class="col-6">
    <div *ngFor="let item of secondColumn">{{ item }}</div>
  </div>
</div>

This will render exactly what you want: the first column has a, b, c, d stacked vertically, and the second column has e, f, g, h stacked next to it—matching the a e; b f layout you're after.

Solution 2: CSS Columns (For Dynamic Array Sizes) #

If your array length might change and you want a more flexible solution, you can use CSS columns to force a column-wise layout, with a break after the 4th item to keep the first group together.

Update your template like this:

<div class="row">
  <div class="col-12" style="columns: 2; gap: 1rem;">
    <div 
      *ngFor="let item of items; let i = index"
      style="break-inside: {{ i === 4 ? 'avoid' : 'auto' }}; margin-bottom: 0.5rem;"
    >
      {{ item }}
    </div>
  </div>
</div>

• columns: 2 splits the container into two equal columns.
• break-inside: avoid on the 5th item (index 4) prevents the first 4 items from being split across columns.
• Adjust gap and margin-bottom to match your spacing needs.

This works well if you need to handle dynamic array lengths, but note that CSS columns can have layout quirks if items have varying heights.

内容的提问来源于stack exchange，提问作者Smartie