最后一列跳转到 ion-grid Ionic 4 中的下一行

Question

我正在尝试使用 5 buttons/icons 创建页脚。实际上我正在尝试复制一个选项卡，但没有使用该功能。有足够的 space 来容纳带有标签的 5 个图标，但是，由于某些原因，Android 最后一个图标跳到了下一行。我一直在尝试调整宽度和尺寸，但我无法获得想要的结果。

有什么建议吗？

长话短说：我希望 Android 中的页脚将显示为 Ios

谢谢

<ion-footer>
 <ion-toolbar color="light">
  <ion-grid>
   <ion-row> 

    <ion-col>  
      <ion-tab-button >
        <ion-icon src="/assets/couple_on.svg"></ion-icon>
        <ion-label>Info</ion-label>
      </ion-tab-button>
    </ion-col> 

    <ion-col>  
      <ion-tab-button >
        <ion-icon src="/assets/rings_off.svg"></ion-icon>
        <ion-label>Donde</ion-label>
      </ion-tab-button>
    </ion-col> 

    <ion-col>  
      <ion-tab-button >
        <ion-icon src="/assets/church_off.svg"></ion-icon>
        <ion-label>Inicio</ion-label>
      </ion-tab-button>
    </ion-col> 

    <ion-col>
      <ion-tab-button >
        <ion-icon src="/assets/cake_off.svg"></ion-icon>
        <ion-label>Programa</ion-label>
      </ion-tab-button>
    </ion-col>

    <ion-col>
      <ion-tab-button >
        <ion-icon src="/assets/camera_off.svg"></ion-icon>
        <ion-label>Fotos</ion-label>
      </ion-tab-button>
     </ion-col>        
    </ion-row>
   </ion-grid>
  </ion-toolbar>
 </ion-footer>

编辑：当我翻译成俄语（较长的单词）并使用 nowrap 时，最后一个图标从屏幕上消失了。我试图减小标签的大小，但仍然没有居中。它很烦人，因为我现在它适合，正如它在 Ios:

中看到的那样

编辑 2：在模拟器中看到它并且您的 correctios 没问题。然而在俄语版本中 phone 仍然远离屏幕，而在西班牙语版本中没有居中，左边的 space 比右边多。 (https://i.stack.imgur.com/Y377b.jpg)

Answer 1

您可以强制该行不换行：

https://ionicframework.com/docs/api/row#row-attributes

但在这种情况下，您需要处理较小的屏幕尺寸，因为列不会自动 "shrink down"

<ion-footer>
 <ion-toolbar color="light">
  <ion-grid>
   <ion-row nowrap>
     ...        
    </ion-row>
   </ion-grid>
  </ion-toolbar>
 </ion-footer>

如果还缺少space可以通过以下方式优化：

一个。删除填充（

将无填充属性应用于离子网格、离子行、离子列
或者只添加简单的 CSS 规则

b。通过 size="small"

缩小 svg

c。使用 Chrome 开发工具，select 元素，看看你需要处理哪个 css 以使其完全适合

最后一列跳转到 ion-grid Ionic 4 中的下一行

Last column jumping to the next row in ion-grid Ionic 4

ionic-framework

ionic4

ion-grid