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

Question

我正在尝试在我的 ionic/angular 项目中的一行中显示两列。即使我将ion-grid 与ion-row 和两个ion-cols 一起使用，第二列的内容在页面下方被撞到，堆叠在第一列下方——这对我来说毫无意义。这是我的 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 类强制“nowrap”：

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

在引擎盖下它会做：

flex-wrap: nowrap