内联网格显示在内

Question

我正在学习离子网格。 我在一台Windows电脑上工作，离子版本是2.2.3

我尝试按照https://ionicframework.com/docs/api/components/grid/Grid/中的非常简单的示例，等宽宽度部分。逻辑就像使用bootstrap时一样，我只是从那里粘贴了网格结构。

但结果是内联元素：

代码：

<ion-view view-title="{{::products.messages.title}}">
  <ion-content>
    <ion-grid>
      <ion-row>
        <ion-col>
          1 of 2
        </ion-col>
        <ion-col>
          2 of 2
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          1 of 3
        </ion-col>
        <ion-col>
          2 of 3
        </ion-col>
        <ion-col>
          3 of 3
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-content>
</ion-view>

这只是一个测试，所以我可以玩网格，但我已经陷入困境。我唯一能想到的是离子的安装版本不支持网格。但是，它是2.2.3，并且离子2支持网格。

Answer 1

检查如下。您错过了<ion-col>

中的列数定义

<ion-grid>
  <ion-row>
    <ion-col col-12>This column will take 12 columns</ion-col>
  </ion-row>
  <ion-row>
    <ion-col col-6>This column will take 6 columns</ion-col>
  </ion-row>
</ion-grid>