html - 在 Ionic 4 的另一个图像上重叠 svg 图标。需要它响应

Question

我正在尝试实现附加的图标图像，它应该在所有屏幕中响应并且不应该在任何屏幕中缩小或移动。共有 4 张图片，1 张是背景图片，另外三张是 svg 图标。

---

 <ion-row>
 <ion-col text-center class="icons middle" size="12">
<ion-img class="icons1" style="margin-left: auto ; margin-right: auto; " 
 class="whitecircle" src="../../../assets/login/white_circle.svg"></ion-img>
    <ion-row text-center class="icon-row">
      <ion-col class="icons2">
        <ion-img src="../../../assets/login/facebook_logo.svg"></ion-img>
      </ion-col>
      <ion-col class=" icons3">
        <ion-img src="../../../assets/login/twitter_logo.svg"></ion-img>
      </ion-col>
      <ion-col class=" icons4">
        <ion-img src="../../../assets/login/google_logo.svg"></ion-img>
      </ion-col>
    </ion-row>
  </ion-col>
 </ion-row>

---

.icon-row{
    position: absolute;
    bottom: 0;
}
.icons{
    display: grid;
    width: 42px;
}
.icons1{
    grid-row: row 1;
}

.icons2{
    grid-row: row 1/ span 3;
}

.icons3{
    grid-row: row 1/ span 3;
}

.icons4{
    grid-row: row 1/ span 3;
}

Answer 1

你说的自相矛盾。

• “响应式”意味着它会进行调整。

• “它不应该收缩或移动”意味着它没有响应。

ion-row 和 ion-col 功能用于构建响应式结构。

如果您不想要那样，那么只需将所有内容放在一个 div 中即可。

您可以将 css white-space: nowrap; 应用于 div，这样无论显示大小如何，它都不会打断内容。