时间戳

首页 > 解决方案 > 离子网格在离子/角度项目中未正确显示

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

问题描述

我试图在我的离子/角度项目中的一行中显示两列。即使我使用ion-grid的是 anion-row和 two 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>

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

标签： cssangularionic-framework

解决方案

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

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

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

在引擎盖下它会做：

flex-wrap: nowrap

推荐阅读