css - 如何在 Ionic 4 的中心 fab 按钮上进行设置？

问题描述

我有两个问题：

中间如何正确设置？请不要在离子卡后面，我测试了很多东西，但是工厂按钮隐藏在离子卡后面的问题，我的代码：

  <ion-grid>
      <ion-row>
        <ion-col text-wrap>
          <ion-card-content color="medium">
            {{ object.body }}
          </ion-card-content>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-fab-button color="danger" [disabled]="disableButton">
            <ion-icon name="flame" (click)="soSad()"></ion-icon>
          </ion-fab-button>
        </ion-col>
      </ion-row>
    </ion-grid>

我怎样才能正确订购带有徽章的图标以使其看起来很棒？我的意思是，图标和徽章更接近，下一个图标徽章旁边有一点空间，或者我可以接受一些想法:) 我的代码是：

      <ion-card-content>
            <ion-grid>
                <ion-row align-items-start>
                    <ion-col>
                        <ion-icon name="eye"></ion-icon>
                    </ion-col>
                    <ion-col>
                            <ion-badge color="secondary">{{ object.see }}</ion-badge>
                    </ion-col>
                    <ion-col>
                        <ion-icon name="flame"></ion-icon>
                    </ion-col>
                    <ion-col>
                        <ion-badge color="danger">{{ object.zharko }}</ion-badge>
                    </ion-col>
                    <ion-col>
                        <ion-icon name="star"></ion-icon>
                    </ion-col>
                    <ion-col>
                        <ion-badge color="warning">{{ object.fav }}</ion-badge>
                    </ion-col>
                </ion-row>                     
            </ion-grid>
        </ion-card-content>

更新：

代码的新问题：S 现在我需要解决这个问题，因为我不需要重叠文本，也许在离子卡底部边缘的中间？但不在离子卡后面，请问有什么想法吗？

标签： cssionic4

<ion-card-content>
        <ion-fab vertical="center" horizontal="start" slot="fixed">
          <ion-fab-button>
            <ion-icon name="share"></ion-icon>
          </ion-fab-button>
       </ion-fab>
        <ion-grid>
            <ion-row align-items-start>
                <ion-col>
                    <ion-icon name="eye"></ion-icon>
                </ion-col>
                <ion-col>
                        <ion-badge color="secondary">{{ object.see }}</ion-badge>
                </ion-col>
                <ion-col>
                    <ion-icon name="flame"></ion-icon>
                </ion-col>
                <ion-col>
                    <ion-badge color="danger">{{ object.zharko }}</ion-badge>
                </ion-col>
                <ion-col>
                    <ion-icon name="star"></ion-icon>
                </ion-col>
                <ion-col>
                    <ion-badge color="warning">{{ object.fav }}</ion-badge>
                </ion-col>
            </ion-row>                     
        </ion-grid>
    </ion-card-content>

它会帮助你。

css - 如何在 Ionic 4 的中心 fab 按钮上进行设置？

问题描述

解决方案

推荐阅读