Ionic5 行 - 降低高度答案

【问题标题】：Ionic5 row - reduce heightIonic5 行 - 降低高度
【发布时间】：2020-11-19 14:58:51
【问题描述】：

我ion-row的默认高度太大了。见截图。它只包含一个图标。我想将其限制在可能的最小宽度。如何？我用no-margin 尝试过，但没有成功。

下面是代码

<ion-grid *ngIf="!drawerIsIdle()" class="ion-no-margin">
    <ion-row class="ion-no-margin">
      <ion-col size='5' class="ion-no-margin"></ion-col>
      <ion-col size='2' class="ion-no-margin">
        <ion-button fill="clear" size="small" (click)="hideDrawer()">
          <ion-icon name="remove-outline"></ion-icon>
        </ion-button>
      </ion-col>
      <ion-col size='5' class="ion-no-margin"></ion-col>
    </ion-row>
  </ion-grid>
  <ion-grid *ngIf="drawerIsIdle()">
    <ion-row>
      <ion-col size="4" text-center><ion-button color="10-session" fill="clear" size="small">Hi</ion-button></ion-col>

【问题讨论】：

标签： html ionic-framework ionic4 ionic5

【解决方案1】：

您还需要使用class="ion-no-padding" 删除一些填充。

在浏览器中检查您的元素以检查填充。

Chrome（示例）

【讨论】：

嗯，离子样式比普通 css 复杂一点
我知道...您可以使用离子类“ion-no-padding”。
顺便说一下，为了简化代码，您还可以在 col 定义中使用“offset”，而不是在按钮 col 前后添加空 col。
谢谢，class="ion-no-padding" 似乎有效。将其添加到答案中，我会向您发送一些业力。 :D
在答案中添加了类！感谢业力 ;-)