Ionic Grid - 两个内容不同但大小相同的并排按钮

Question

我有一个 header 元素，带有两个按钮。我将按钮组织在 ion-grid 中，其中两个按钮 并排，大小相同，并居中在列 中。这样尺寸非常适合手机，但使用浏览器时按钮太大：

<ion-header>
    <ion-toolbar>       
        <ion-grid>
            <ion-row>
                <ion-col size="6" class="ion-text-center">
                    <ion-button style="width: 75%;">Menu</ion-button>
                </ion-col>
                <ion-col size="6" class="ion-text-center">
                    <ion-button style="width: 75%;">Abcdefghijklmn</ion-button>
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-toolbar>
    <style>html, body { margin: 0; }</style>
</ion-header>

我尝试更改 min-width 和 max-width，但是当它变得非常适合浏览器屏幕尺寸时，它对于移动设备来说太小了，按钮变得比里面的文本小。

按照建议 here，我尝试应用 expand="full"、class="ion-text-wrap" 并为按钮设置 max-width，但它失去了中心属性由 class="ion-text-center" 在 ion-col 上定义。然后我添加了 style="text-align: center" 来维护 ion-col 标签中的中心属性，但没有任何区别`。

Stackblitz

Answer 1

您可以像这样制作响应式网格。（您可以根据您的用例调整网格大小）

参考：https://ionicframework.com/docs/layout/grid#grid-size

<ion-grid>
    <ion-row>
        <ion-col size-sm="6" size="6" class="ion-text-center">
            <ion-button expand="full" class="ion-text-wrap min-max-width">Menu</ion-button>
        </ion-col>

        <ion-col size-sm="6" size="6" class="ion-text-center">
            <ion-button expand="full" class="ion-text-wrap min-max-width">Abcdefghijklmn</ion-button>
        </ion-col>
    </ion-row>
</ion-grid>

<style>
    .min-max-width {
        max-width: 200px;
        margin: 0 auto;
    }
</style>

Ionic Grid - 两个内容不同但大小相同的并排按钮

Ionic Grid - Two buttons with different content but with the same size, side by side

ionic-framework

ionic4