Ionic 2连续多个离子项目

Question

I want to show 4 ion-items in my ion-list in a row.

Since I'm using Bootstrap, I tried to do:

<button class="col-sm-3" ion-item *ngFor="let player of players">
    <ion-avatar item-left>
      <img [src]="user.photoURL">
    </ion-avatar>
    {{ user.name }}
  </button>

but it didn't work.

Answer 1

You can manually set the width of each column by using the Explicit Column Percentage Attributes like this:

<ion-row>
    <ion-col width-25>
        <!-- item 1 -->
    </ion-col>
    <ion-col width-25>
        <!-- item 2 -->
    </ion-col>
    <ion-col width-25>
        <!-- item 3 -->
    </ion-col>
    <ion-col width-25>
        <!-- item 4 -->
    </ion-col>
</ion-row>

Or just add ion-col dynamically, and they will expand to fill their row, and will resize to fit additional columns, like this:

<ion-row>
    <ion-col *ngFor="let player of players">
        <ion-item>
            <ion-avatar item-left>
                <img [src]="user.photoURL">
            </ion-avatar>
            {{ user.name }}
        </ion-item>
    </ion-col>
</ion-row>

You can find more information about the Explicit Column Percentage Attributes here .

UPDATE

As of Ionic 3.0.0 , the way to achieve the same with the new grid would be something like this:

<ion-row>
    <ion-col col-3>
        <!-- item 1 -->
    </ion-col>
    <ion-col col-3>
        <!-- item 2 -->
    </ion-col>
    <ion-col col-3>
        <!-- item 3 -->
    </ion-col>
    <ion-col col-3>
        <!-- item 4 -->
    </ion-col>
</ion-row>

So the width-25 attribute needs to be replaced by col-3 .

Answer 2

Try:

<ion-item>
<ion-row>
<ion-col *ngFor="let player of players">
    <ion-avatar item-left>
      <img [src]="user.photoURL">
    </ion-avatar>
    {{ user.name }}
  </ion-col>
</ion-row>
</ion-item>

You dont really need bootstrap for this. Check this tutorial and here