在Ionic 4中的另一张图像上重叠svg图标。需要它响应

Question

我正在尝试实现一个附加的图标图像，该图像应该在所有屏幕中都具有响应能力，并且不应在任何屏幕中收缩或移动。总共有4张图片，其中1张是背景图片，另外3张是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，以便无论显示大小如何都不会拆分内容。