较大设备上的Ionic 3网格未按预期工作（希望我做得不对）

Question

我使用的Ionic 3flexbox网格系统如下所示。这是一个Modal控制器。

.html

<ion-content class="content">
  <ion-grid no-padding>
    <ion-row class="header">
    </ion-row>
    <ion-row padding class="details">
      <ion-col>
        <form [formGroup]="forgotPasswordForm" (submit)="goToNext()" novalidate>
          <ion-item>
            <ion-label>
              <ion-icon name="person"></ion-icon>
            </ion-label>
            <ion-input type="text" placeholder="Distributor ID" formControlName="distributorId"></ion-input>
          </ion-item>
          <button ion-button block class="button-radius-25" type="submit"><span>Next <ion-icon name="arrow-round-forward"></ion-icon></span></button>
          <ion-item no-lines>
            <ion-label class="font-size-14" text-center>Not a member? Sign up now!</ion-label>
          </ion-item>
        </form>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

.scss

 .content {
        ion-grid {
            height: 100%;
        }
        .header {
            flex: 1;
        }
        .details {
            flex: 3;
        }
    }

移动设备-无问题

但在桌面上，它显示如下。

问：在更大的设备上似乎很糟糕。如何保持相同的比例（我指的是按钮和文本框组件上的小尺寸），并将内容集中在较大的设备上？希望你能给我一些建议。

Answer 1

您可以使用col sm-，col md-。。。要更改不同屏幕大小中的项目大小，请执行以下操作：

<ion-row padding class="details">
      <ion-col col-lg-6 col-md-6 col-12>
        <form [formGroup]="forgotPasswordForm" (submit)="goToNext()" novalidate>
          <ion-item>
            <ion-label>
              <ion-icon name="person"></ion-icon>
            </ion-label>
            <ion-input type="text" placeholder="Distributor ID" formControlName="distributorId"></ion-input>
          </ion-item>
          <button ion-button block class="button-radius-25" type="submit"><span>Next <ion-icon name="arrow-round-forward"></ion-icon></span></button>
          <ion-item no-lines>
            <ion-label class="font-size-14" text-center>Not a member? Sign up now!</ion-label>
          </ion-item>
        </form>
      </ion-col>
</ion-row>

和中心项目：

.details{
   justify-content: center;
}

查看更多关于离子网格