Question

我已获得此代码

<ion-grid>
      <ion-row wrap> 
        <ion-col col-2>
          <h3>Adresse</h3>
        </ion-col>
        <ion-col col-1 offset-1>
          <h3>Telefon</h3> 
        </ion-col>
        <ion-col col-4>
          <h3>Geb./Fam./Adelspräd.</h3>
        </ion-col>
        <ion-col col-2>
          <h3>Beruf/Stellung/Titel</h3>
        </ion-col>
        <ion-col col-2>
          <h3>KNR/Inhaber</h3>
        </ion-col>
      </ion-row>
    </ion-grid>

但它没有对col- *属性做任何事情，就像这里描述的那样 https://ionicframework.com/docs/v2/api/components/grid/Grid/ 我找不到任何叫做的css类。只有5个宽度相同的cols

当我选择宽度为10时，它会对我正在做的事情做出反应。

最后，我想要这样的东西

<ion-col col-12 col-sm>
  1 of 4
</ion-col>

让它响应。

感谢您的帮助！

Answer 1

你应该使用

width-10

而不是

col-10

Answer 2

它接缝，离子不支持整个flexbox-grid，只知道像width-*这样的类。

为了使用flexbox-grid的全部功能，我导入了原始的flexbox css文件，一切正常。

website of the flexbox-grid

Answer 3

这是离子响应网格的常见问题。解决方案是像使用属性一样使用类（如provided by Ionic）。所以：

而不是

<ion-col col-3>
 This is apparently an ionic column of 25% width.
</ion-col>

你会用

<ion-col class="col-3">
 This is apparently an ionic column of 25% width.
</ion-col>

您还可以组合属性：

<ion-col class="col-12 col-md-5 offset-1 col-lg-6">
 This is an ionic column of 100% width for all screens **up to** medium size, 41% with 8.3% offset for all screens medium to large, and 50% for large screens upwards.
</ion-col>

这应该可以解决问题。请记住，你的离子柱should always be inside ionic rows, inside grids。

col-* / respnosive的离子2网格问题

3 个答案: