连续 4 个数字使用 Ionic 2 引导程序

Question

我试图使用ionic 2引导程序和html图形元素制作产品库。问题是，在 4 个产品上，使用 col width-25，它会分成一个新行。

如何使所有数字保持在同一条线上？

<ion-grid>
    <ion-row responsive-sm>
      <ion-col width-25>
        <figure>
          <img class="adjust-caption-image" src="{{ products[0].src }}" />
          <figcaption class="bg-lightgrey">
            <b class="tiny-text">{{ products[0].productName }}</b> <br />
            <div class="tiny-text font-darkgrey"><b>{{ products[0].supplierName }}</b></div> <br /> R$
            <div class="price-text">{{ products[0].price }}</div>
          </figcaption>
        </figure>
      </ion-col>
      <ion-col width-25>
        <figure>
          <img class="adjust-caption-image" src="{{ products[0].src }}" />
          <figcaption class="bg-lightgrey">
            <b class="tiny-text">{{ products[0].productName }}</b> <br />
            <div class="tiny-text font-darkgrey"><b>{{ products[0].supplierName }}</b></div> <br /> R$
            <div class="price-text">{{ products[0].price }}</div>
          </figcaption>
        </figure>
      </ion-col>
      <ion-col width-25>
        <figure>
          <img class="adjust-caption-image" src="{{ products[0].src }}" />
          <figcaption class="bg-lightgrey">
            <b class="tiny-text">{{ products[0].productName }}</b> <br />
            <div class="tiny-text font-darkgrey"><b>{{ products[0].supplierName }}</b></div> <br /> R$
            <div class="price-text">{{ products[0].price }}</div>
          </figcaption>
        </figure>
      </ion-col>
      <ion-col width-25>
        <figure>
          <img class="adjust-caption-image" src="{{ products[0].src }}" />
          <figcaption class="bg-lightgrey">
            <b class="tiny-text">{{ products[0].productName }}</b> <br />
            <div class="tiny-text font-darkgrey"><b>{{ products[0].supplierName }}</b></div> <br /> R$
            <div class="price-text">{{ products[0].price }}</div>
          </figcaption>
        </figure>
      </ion-col>
    </ion-row>
  </ion-grid>

Answer 1

Ionic 2 使用 12 列引导系统。 有效列的范围为 1 到 12，如 col-3 col-4 col-6 col-12 .

我不得不使用col-3而不是col-25.