1

我正在尝试创建一个带有 5 个按钮/图标的页脚。实际上我正在尝试复制一个选项卡,但没有使用该功能。有足够的空间容纳 5 个带有 teir 标签的图标,但是,由于某种原因,在 Android 中,最后一个图标会跳到下一行。我一直在尝试使用宽度和尺寸,但无法获得所需的结果。

有什么建议吗?

长话短说:我希望在 Android 中,页脚将像在 Ios 中一样显示

谢谢

iOS 与 Android 视图

<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在此处输入图像描述 在此处输入图像描述

4

1 回答 1

3

您可以强制该行不换行:

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 以使其完美匹配

在此处输入图像描述

于 2020-01-13T17:13:45.807 回答