css - 较大设备上的 Ionic 3 Grid 无法按预期工作(希望我做错了)

Question

我正在使用 Ionic 3 flexbox 网格系统，如下所示。这是一个 Modal `controller。

.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;
        }
    }

移动设备 - 没有问题

但在桌面上，显示如下。

问:在较大的设备上看起来很糟糕。如何保持相同的比例(我的意思是 Button 和 textbox 的组件尺寸较小)和也将内容集中在较大的设备上？希望大家对此提出建议。

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;
}

查看更多关于 ionic grid 的信息