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

Question

我正在嘗試創建一個帶有 5 個按鈕/圖標的頁腳。 實際上我正在嘗試復制一個選項卡，但沒有使用該功能。 有足夠的空間來放置帶有 teir 標簽的 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：在模擬器中看到它並且您的更正沒問題。 然而，在俄語版本中，手機仍然遠離屏幕，在西班牙語中不居中，左側比右側有更多空間。 ( https://i.stack.imgur.com/Y377b.jpg )

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>

如果您仍然缺乏空間，您可以通過以下方式對其進行優化：

一種。 去除填充（

• 將無填充屬性應用於離子網格、離子行、離子列
• 或者只是添加簡單的 CSS 規則

灣通過 size="small" 使 svg 變小

C。 使用 Chrome 開發工具，選擇元素並查看您需要處理哪些 css 以使其完美契合