html - 响应式网格 - IONIC 2

Question

我需要你帮助制作这个网格。 当我调整窗口大小时，网格不会保留初始形状。我需要网格能够响应，但我做不到。 我尝试了很多次，做了很多修改

这是我到目前为止的代码。

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>  

请告诉我解决此问题的方法。

谢谢

Answer 1

只需使用 Ionic 本身的 de columns 属性，它默认是响应式的

仅使用 col-2 将使所有视口(viewport)中的所有列均为 2 个空格宽，因为网格中可以有 12 列，这将是 6 列。

如果您希望网格在不同的显示中具有不同的大小，您需要为您想要的每个显示提供一个属性，将它们设置为:

• col-* 或 col-xs-*:每个视口(viewport)大小相同。
• col-sm-*:适用于 540 像素及以上。
• col-md-*:适用于 720 像素及以上。
• col-lg-*:适用于 940 像素及以上。
• col-xl-*:适用于 1140 像素及以上。

一个属性会覆盖其他属性。所以它很像 Bootstrap 网格组件(如果您已经使用过 Bootstrap)。

有关更多信息，请参阅文档:https://ionicframework.com/docs/api/components/grid/Grid/

希望这有帮助。