离子网格正在内联显示答案

【问题标题】：Ionic grid is being displayed inline离子网格正在内联显示
【发布时间】：2017-06-12 20:24:32
【问题描述】：

我只是在学习离子网格。我在windows电脑上工作，离子版本是2.2.3

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

然而结果是内联元素：

代码：

<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，并且 ionic 2 支持网格。

【问题讨论】：

你似乎混淆了离子 1 和 2..离子 2 中没有 ion-view
@suraj 好的，现在我有点困惑。如果ionic的版本是2.2.3，是不是说明我有ionic2？
你在 package.json 中有 ionic-angular 吗？它的版本是什么？
@suraj 好吧，我查了一下，没有这样的包。我想我现在明白了 ionic2 与 ionic 版本 2.x.x 不同。看起来 ionic2 适用于 angularjs 3
我认为您检查了 ionic cli 版本，该版本与您项目中的 ionic 框架版本不同。您可能已经创建了一个 ionic 1 项目...

标签： ionic2 grid-layout

【解决方案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>

【讨论】：

不一定。根据文档，如果没有定义列宽，离子将为其列平均划分整个行宽。无论如何，我也尝试定义 col 宽度，但仍然得到相同的结果。