Ionic 3 Grid在较大设备上未按预期工作（希望我错了）

-1

我正在使用Ionic 3flexbox网格系统如下所示。这是一个Modal`控制器。Ionic 3 Grid在较大设备上未按预期工作（希望我错了）

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

移动设备 - 没有问题

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

问：这似乎在更大device.How我可以保持同一种比例非常不好（我指的分量小尺寸Button和textbox）和中心的较大设备上的内容太？希望你能为此提出建议。

来源

2017-08-12 Sampath

您可以使用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

来源

2017-08-12 09:54:52 Duannx

Oh..Wonderfull 。正在工作。谢谢。是的，我正在阅读文档。请你解释一下你上面做的魔法？ – Sampath

这里没有魔法。离子电网完成了所有工作。我为'screen> 992px'添加'col-lg-6'，为所有屏幕添加'screen> 768px'和'col-12'的'col-md-6'。 'col-6'的意思是'width：50％'和'col-12'意思是'width：100％' – Duannx

我有一个困惑，因此在行中只有一列。我知道行最多可以有12列。但是当我们给它一列的“col-lg-6”时，在一个更大的设备上会发生什么情况？当我们只有一列时，“col-lg-12”和“col-lg-6”有什么不同？它的行为如何？ – Sampath

Ionic 3 Grid在较大设备上未按预期工作（希望我错了）

回答

相关问题