Question

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

当我在ion-item中使用ion-grid时，它总是占据页面的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>

对齐选择并输入文本Ionic2

2 个答案: