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

我使用的是

Ionic 3

flexbox

网格系统，如下所示。这是一个

模态

`控制器

.html

移动设备-无问题

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

---

问：在较大的设备上，这似乎非常糟糕。我如何保持相同的比率（我指的是

按钮
和
文本框
组件上的小尺寸），并将内容也集中在较大的设备上？希望您能对此给出建议。
您可以使用
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>

查看更多关于
哦..太棒了。它正在工作。谢谢。是的，我正在看医生。你能解释一下你在上面做的魔法吗？这里没有魔法。离子网格完成了所有的工作。我只添加了
col-lg-6
用于
screen>992px
，
col-md-6
用于
screen>768px
和
col-12
用于所有屏幕
col-6
mean
width:50%
和
col-12
mean
width:100%
我有一个困惑，这是因为行中只有一列。我知道行最多可以有12列。但当我们为一列指定
col-lg-6
时，在更大的设备上会发生什么？col-lg-12
当我们只有一列的时候，
col-lg-6
？它的行为如何？很难在评论中解释所有这些。举个例子，你就会明白。只需将
col-12 col-6 col-md-6 col-lg-6
添加到一个col中，并在桌面屏幕视图中检查它。你会看到区别。这只是css。如果您仍然感到困惑，请告诉我。是的，我这样做了，现在看起来很好。一个问题：这场火灾是什么时候发生的？在哪个设备上？
 .content {
        ion-grid {
            height: 100%;
        }
        .header {
            flex: 1;
        }
        .details {
            flex: 3;
        }
    }

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