響應式網格 - IONIC 2

我需要你幫忙製作這個網格。當我調整窗口大小時，網格不保留初始形狀。我需要網格響應，我不能這樣做。我有許多修改響應式網格 - IONIC 2

這是我的代碼到目前爲止已經試過這麼多的時間。

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>

請讓我知道什麼辦法可以解決這個問題。

感謝

來源

2017-08-05 bECkO

刪除所有您自定義的'CSS'並查看結果？ – Sampath

如果我刪除了樣式，我沒有看到窗口中的任何內容，只是標題和徽標。我只想製作一個可根據顯示位置調整大小的網格（桌面或移動設備） – bECkO

只需使用德列從離子本身的屬性，它的響應默認

只使用col-2將使所有列是2空間寬在所有視口中，因爲你可以在網格中有12列這將是6列。

如果你想在電網在不同顯示不同的大小，你需要爲你希望每一個顯示器，beeing它們的屬性：

col-*或col-xs-*：每視口的大小相同。
col-sm-*：540px及以上。
col-md-*：720px及以上。
col-lg-*：適用於940像素及以上。
col-xl-*：適用於1140像素及以上。

一個屬性覆蓋其他屬性。所以它很像Bootstrap網格組件（如果你已經使用過Bootstrap）。

詳情參見文檔：https://ionicframework.com/docs/api/components/grid/Grid/

希望這有助於。

來源

2017-08-05 17:42:10

Ionic網格默認爲響應性。所以您的自定義CSS樣式存在問題。此處最好的做法是從頭開始。這意味着無需應用樣式。然後逐個應用它並查看它的位置剎車網格。這樣你可以找到發佈的CSS。

網格是一個功能強大的移動第一flexbox系統用於構建自定義佈局。它受Bootstrap網格系統的嚴重影響。

網格由三個單元組成 - 一個網格，一個或多個行和一個或多個列。列將展開以填充其行，並將調整大小以適合附加列。它基於12列的佈局，基於屏幕尺寸，具有不同的斷點。使用Sass可以完全定製斷點的數量和斷點。

您可以使用official doc here獲得關於此網格系統的大量知識。

來源

2017-08-05 17:42:53 Sampath

響應式網格 - IONIC 2

回答

相關問題