对齐 Select 并输入文本 Ionic2

Question

我正在尝试使用 ionic2 对齐组合和输入文本。

当我在 ion-grid 中使用 ion-item 时，它总是占据页面的 50%，而不考虑配置的大小。

知道怎么做吗？

<ion-row>
    <ion-col width-30>
      <ion-item>
          <ion-select [(ngModel)]="type">
            <ion-option value="work">work</ion-option>
            <ion-option value="home">home</ion-option>
            <ion-option value="cel">cel</ion-option>
          </ion-select>
      </ion-item>
    </ion-col>
     <ion-col width-70>
      <ion-item>
            <ion-input type="text" [(ngModel)]="phone" clearInput placeholder="Phone"></ion-input>
      </ion-item>
    </ion-col>
  </ion-row>

https://plnkr.co/edit/BwdCrwECIXV6krWZBCzl?p=preview

Answer 1

正如您在 Ionic2 docs 中看到的，这些值可用于设置列的宽度：

Explicit Column Percentage Attributes
width-10        10%
width-20        20%
width-25        25%
width-33        33.3333%
width-50        50%
width-67        66.6666%
width-75        75%
width-80        80%
width-90        90%

这就是为什么如果您尝试使用 width-30 或 width-70，什么也不会改变。相反，您可以使用 width-33 和 width-67 对齐这两个字段，就像您在 this working plunker.

中看到的那样

在那里，如果您在浏览器中检查 ion-col 元素，您会看到正在应用此样式规则：

ion-col[width-33], ion-col[width-34] {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.3333%;
    -ms-flex: 0 0 33.3333%;
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}

和

ion-col[width-66], ion-col[width-67] {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 66.6666%;
    -ms-flex: 0 0 66.6666%;
    flex: 0 0 66.6666%;
    max-width: 66.6666%;
}

width-30 和 width-70 没有发生这种情况。

Answer 2

尝试将 ion-item 作为 ion-row 的父标签

<ion-item>
<ion-row>
    <ion-col width-30>

          <ion-select [(ngModel)]="type">
            <ion-option value="work">work</ion-option>
            <ion-option value="home">home</ion-option>
            <ion-option value="cel">cel</ion-option>
          </ion-select>
      </ion-item>
    </ion-col>
     <ion-col width-70>
      <ion-item>
            <ion-input type="text" [(ngModel)]="phone" clearInput placeholder="Phone"></ion-input>

    </ion-col>
  </ion-row>
</ion-item>

对齐 Select 并输入文本 Ionic2

Align Select And input Text Ionic2

ionic2