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-*：适用于540px及以上。
col-md-*：适用于720px及以上。
col-lg-*：适用于940px及以上。
col-xl-*：适用于1140px及以上。

一个属性覆盖其他属性。所以它很像Bootstrap网格组件（如果你已经使用过Bootstrap）。

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

希望这有帮助。

Answer 2

Ionic网格默认是响应性的。所以你的自定义CSS样式有问题。这里最好的事情是从头开始。这意味着没有应用你的样式。之后逐个应用它看看它在哪里制动Grid。这样你就可以找到发布的CSS。

网格是一个功能强大的移动优先Flexbox系统，用于构建自定义   布局。它受Bootstrap网格系统的影响很大。

网格由三个单元组成 - 网格，行和列。   列将展开以填充其行，并将调整大小以适应   附加列。它基于12列布局，具有不同的布局   基于屏幕大小的断点。列数和   断点可以使用Sass完全自定义。

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

响应式网格 - IONIC 2

2 个答案: