2017-08-05 3 views
2

Ich brauche Sie helfen, dieses Gitter zu machen. Wenn ich die Größe des Fensters ändere, behält das Raster nicht die ursprüngliche Form bei. Ich brauche das Raster, um zu reagieren, und ich kann es nicht tun. Ich habe versucht, so viel Zeit mit vielen ModifikationenResponsive Gitter - IONIC 2

enter image description here

Dies ist mein Code so weit.

page-home { 
 

 
*{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
ion-header{ 
 
    background-color: #fff; 
 
    height: 3em; 
 
    width: 100%; 
 
    font-size: 15px; 
 
} 
 

 
ion-toolbar{ 
 
    height: 1em; 
 
    padding: 0; 
 
    width: auto; 
 
    display: block; 
 
} 
 

 

 
.toolbar-md{ 
 
    padding: 4px; 
 
    min-height: 40px; 
 
    padding-left: 40px; 
 

 
} 
 

 
ion-toolbar.logo img{ 
 
    height: 1.3em; 
 

 
} 
 

 
ion-toolbar.container{ 
 
    color: #fff!important; 
 
} 
 

 
ion-content{ 
 
    margin: 80px 0px; 
 
    min-height: 56vh; 
 
} 
 

 
ion-col.info{ 
 
    text-align: center; 
 
    background-color: #fff; 
 
    border: 1px solid #ddd!important; 
 
} 
 

 
ion-row.title ion-col{ 
 
    text-align: center; 
 
    font-weight: bold; 
 
    background-color: #eee; 
 
    border: 1px solid #ddd!important; 
 
} 
 

 
ion-grid.footer-table{ 
 
    width: 30%; 
 
} 
 

 
}
<ion-content> 
 
    <ion-grid fixed> 
 

 
     <!-- Titles --> 
 

 
     <ion-row class="title"> 
 
     <ion-col col-2> 
 
      EVENT 
 
     </ion-col> 
 
     <ion-col col-2> 
 
      ORIGIN 
 
     </ion-col> 
 
     <ion-col col-2> 
 
      DESTINY 
 
     </ion-col> 
 
     <ion-col col-2> 
 
      ERRORS 
 
     </ion-col> 
 
     <ion-col col-2> 
 
      FIRST EVENT 
 
     </ion-col> 
 
     <ion-col col-2> 
 
      LAST EVENT 
 
     </ion-col> 
 
     </ion-row> 
 

 
     <!-- Data --> 
 
     <ion-row class="inforow"> 
 
     <ion-col class="info" col-2> 
 
      ETA 
 
     </ion-col> 
 
      <ion-col class="info" col-2> 
 
      SLI 
 
      </ion-col> 
 
      <ion-col class="info" col-2> 
 
      ODBMS 
 
      </ion-col> 
 
      <ion-col class="info" col-2> 
 
      6   
 
      </ion-col> 
 
      <ion-col class="info" col-2> 
 
      04/08/2017 
 
      </ion-col> 
 
      <ion-col class="info" col-2> 
 
      04/08/2017 
 
      </ion-col> 
 
     </ion-row> 
 
    </ion-grid> 
 
</ion-content>

Bitte lassen Sie mich irgendeine Art und Weise kennen dieses Problem zu lösen.

Dank

+0

Entfernen Sie alle Ihre benutzerdefinierten 'CSS' und sehen Sie das Ergebnis? – Sampath

+0

Wenn ich die Stile lösche, sehe ich nichts im Fenster, nur den Titel und das Logo. Ich möchte nur ein Raster erstellen, dessen Größe je nach Anzeigeort (Desktop oder Handy) geändert werden kann. – bECkO

Antwort

2

Just de Spalten verwenden Attribute von Ionic selbst, dann ist es als Reaktion standardmäßig

nur verwenden col-2 werden alle Spalten in allen Ansichtsfenstern 2 Raum breit machen, da Sie 12 Spalten in einem Raster haben Das sind 6 Spalten.

Wenn Sie das Gitter wollen unterschiedliche Größen haben in verschiedenen Displays werden Sie für jede Anzeige ein Attribut benötigen Sie wollen, beeing sie:

  • col-* oder col-xs-*: die gleiche Größe für jedes Ansichtsfenster.
  • col-sm-*: für 540px und höher.
  • col-md-*: für 720px und höher.
  • col-lg-*: für 940px und höher.
  • : für 1140px und höher.

Ein Attribut überschreiben andere. Es ähnelt also der Bootstrap-Grid-Komponente (wenn Sie bereits mit Bootstrap gearbeitet haben).

Lesen Sie die Dokumentation für weitere Informationen: https://ionicframework.com/docs/api/components/grid/Grid/

Hoffnung, das hilft.

0

Das Ionic Grid ist standardmäßig Reaktionsfähigkeit.So haben Sie ein Problem mit Ihrem benutzerdefinierten CSS Stile.Die beste Sache hier ist von Grund auf neu zu starten.Das bedeutet, ohne Ihre Stile.Nach dem, wenden Sie es eins nach dem anderen und sehen, wo es bremst das Grid.Auf diese Weise können Sie das ausgegebene CSS herausfinden.

Das Grid ist ein leistungsfähiges Mobile-First-Flexbox-System zum Erstellen benutzerdefinierter Layouts. Es wird stark vom Bootstrap-Grid-System beeinflusst.

Das Gitter besteht aus drei Einheiten - Gitter, Reihe (n) und Säule (n). Spalten werden erweitert, um ihre Zeile zu füllen, und werden so skaliert, dass sie zu zusätzlichen Spalten passen. Es basiert auf einem 12-Spalten-Layout mit unterschiedlichen Breakpoints basierend auf der Bildschirmgröße. Die Anzahl der Spalten und Breakpoints kann mit Sass vollständig angepasst werden.

Sie können sehr viel Wissen über dieses Rastersystem mit official doc here erhalten.