ionic-framework - 最后一列跳转到离子网格 Ionic 4 中的下一行

Question

我正在尝试创建一个带有 5 个按钮/图标的页脚。实际上我正在尝试复制一个选项卡，但没有使用该功能。有足够的空间容纳 5 个带有 teir 标签的图标，但是，由于某种原因，在 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： 在模拟器中看到它并且使用您的正确工具没问题。然而在俄文版的手机仍然远离屏幕，并且在西班牙文中没有居中，左边比右边有更多的空间。（https://i.stack.imgur.com/Y377b.jpg）

标签： ionic-frameworkionic4ion-grid

Answer 1

您可以强制该行不换行：

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

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

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

如果您仍然缺少空间，您可以通过以下方式对其进行优化：

一个。删除填充（

• 对 ion-grid、ion-row、ion-column 应用无填充属性
• 或者只是添加简单的 CSS 规则

湾。通过 size="small" 使 svg 更小

C。使用 Chrome 开发工具，选择元素并查看需要处理的 CSS 以使其完美匹配