响应栅极-离子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将使所有视图中的所有列都有2个空格，因为您可以在一个网格中有12列--这将是6列。

如果希望网格在不同的显示中具有不同的大小，则需要为所需的每一个显示设置一个属性：

• col-*或col-xs-*：每个视口的大小相同。
• col-sm-*：用于540 for及以上。
• col-md-*：用于720 for及以上。
• col-lg-*：用于940 for及以上。
• col-xl-*：用于1140 for及以上。

一个属性覆盖另一个属性。因此，它非常类似于引导网格组件(如果您已经使用过Bootstrap)。

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

希望这能有所帮助。

Answer 2

在默认情况下，Ionic网格是responsiveness.So，您的自定义CSS styles.The有问题，这里最好的事情是从scratch.That开始，而不是应用您的styles.After逐个应用它，看看它在哪里刹车Grid.That方式，您可以找到发布的CSS。

网格是一个强大的移动第一柔性箱系统，用于建立自定义布局。它受Bootstrap网格系统的影响很大。 网格由三个单元组成--网格、行和列。列将展开以填充其行，并将调整大小以适应其他列。它基于12列布局，根据屏幕大小有不同的断点。可以使用Sass完全自定义列和断点的数量。

您可以使用official doc here获得关于这个网格系统的大量知识。