如何在 ionic 中删除 ion-row 和 ion-col 的空间（边距/填充）？

Posted 2023-02-22

【中文标题】如何在 ionic 中删除 ion-row 和 ion-col 的空间（边距/填充）？

【英文标题】：How to remove space (margin/padding) of ion-row and ion-col in ionic?

【发布时间】：2018-05-20 04:17:49

【问题描述】：

这是我的代码：

<ion-content padding text-center>
    <img src="../assets/img/logo.png"  class="logo" />


</ion-content>
<ion-footer>
    <ion-row no-padding>
        <ion-col col-6 align-self-stretch>
            <button ion-button full>Button</button>
        </ion-col>
        <ion-col col-6 align-self-stretch>
            <button ion-button full>Button</button>
        </ion-col>
    </ion-row>
</ion-footer>

我需要删除 ion-row 和 ion-col 的填充/边距。我试过谷歌搜索，但我没有运气。我也是离子的新手。蒂亚！

截图如下：

我需要做到这一点：

【问题讨论】：

将no-padding-class 添加到buttons

如果你正在用 chrome 调试 Ionic，你可以使用检查器找到由 ion-col 和 ion-row 创建的 div + 类。 （见这里）[mcgivery.com/debugging-ionic-apps-chrome-developer-tools/]

【参考方案1】：

您需要在 ion-col 上设置 no-padding 属性，而不是为按钮设置 ion-row 和 no-margin。

<ion-row>
    <ion-col col-6 no-padding>
        <button ion-button full no-margin>Button</button>
    </ion-col>
    <ion-col col-6 no-padding>
        <button ion-button full no-margin>Button</button>
    </ion-col>
</ion-row>

【参考方案2】：

对于那些使用 Ionic4+ 的用户，请使用 class="ion-no-padding" 或 class="ion-no-margin"。

...
<ion-col class="ion-no-padding">
   <ion-button class="ion-no-margin">Button</ion-button>
</ion-col>
...

更多信息请参考文档：https://ionicframework.com/docs/layout/css-utilities#element-padding。