离子网格在离子/角度项目中未正确显示

Question

我试图在我的离子/角度项目中的一行中显示两列。 即使我使用带有ion-row和两个ion-col的ion-grid ，第二列的内容也会在页面上向下移动，堆叠在第一列下方 - 这对我来说毫无意义。 这是我的 HTML：

  <ion-grid>
    <ion-row style="border: none;" *ngFor="let word of words; let i = index">
      <ion-col style="border: none;">{{ word | acrossWord }}</ion-col>
      <ion-col style="border: none;">{{ word | downWord }}</ion-col>
    </ion-row>
  </ion-grid>

为什么会发生这种情况，我能做些什么来纠正它？

Answer 1

因此，如果默认情况下两列的宽度一起超过容器宽度，则 ion-raw 作为 flex 容器将允许其中的元素进行换行。

为了防止这种行为，您可以使用此 css class 强制“nowrap”：

<ion-row class="ion-nowrap"></ion-row>

在引擎盖下它会做：

flex-wrap: nowrap