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

Question

我有一个元素，它是一个带有两个按钮的标题。我将按钮组织在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" 上class="ion-text-center" 定义的中心属性。然后我添加了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>