如何使用 Ionic 5-React 在 IonGrid 上启用水平滚动

Question

如何使用 IonCard 在 IonGrid 上启用水平滚动。下面是我试图启用水平滚动的代码，以便所有字段将显示在任何设备或浏览器的同一行中

                  
                 <IonCard>
                  <IonCardHeader> </IonCardHeader>
                  <IonCardContent>
                  <IonGrid>
                    <IonRow key={index} className="ion-nowrap">
                      <IonCol size="12" size-md="4">
                        <IonItem>
                          <IonLabel>Test1</IonLabel>
                          <IonInput />
                        </IonItem>
                      </IonCol>
                      <IonCol size="12" size-md="4">
                        <IonItem>
                          <IonLabel>Test2</IonLabel>
                          <IonInput />
                        </IonItem>
                      </IonCol>
                      <IonCol size="12" size-md="4">
                        <IonItem>
                          <IonLabel>Test3</IonLabel>
                          <IonInput />
                        </IonItem>
                      </IonCol>
                      <IonCol size="12" size-md="4">
                        <IonItem>
                          <IonLabel>Test4</IonLabel>
                          <IonInput />
                        </IonItem>
                      </IonCol>
                </IonRow>
            </IonGrid>
        </IonCardContent>
</IonCard>

Answer 1

flex-wrap: nowrap;
overflow-x: scroll!important;
overflow-y: hidden;