離子網格在離子/角度項目中未正確顯示

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