带有按钮的Ionic2网格 - 如何将按钮连续组成相同的高度？

Question

正如您所看到的，我使用的是由可点击按钮组成的网格，但有些网格包含大量文本，这些文本包含并使某些按钮更高。我想让同一行中的相应按钮填充垂直空间等于包装按钮。

这里有解决方案吗？

<ion-grid>

<ion-row class="ionrow">
    <ion-col width-33><button ion-button full>b</button></ion-col>
   <ion-col width-67><button ion-button full></button></ion-col>
</ion-row>

<ion-row class="ionrow">
 <ion-col width-33><button ion-button full>bp</button></ion-col>
 <ion-col width-67><ion-item text-wrap full>Un-aspirated p that sounds like a cross between a b and a p.  Make the <i>bp</i> sound by copying a p sound but not letting any air come out of your mouth.</ion-item></ion-col>
 </ion-row>

 </ion-grid>

Answer 1

使用column attributes。 试试align-self-stretch

<ion-grid>

<ion-row class="ionrow">
    <ion-col width-33><button ion-button full>b</button></ion-col>
   <ion-col width-67><button ion-button full></button></ion-col>
</ion-row>

<ion-row class="ionrow">
 <ion-col align-self-stretch width-33><button ion-button full>bp</button></ion-col>
 <ion-col width-67><ion-item text-wrap full>Un-aspirated p that sounds like a cross between a b and a p.  Make the <i>bp</i> sound by copying a p sound but not letting any air come out of your mouth.</ion-item></ion-col>
 </ion-row>

 </ion-grid>