我正在尝试实现一个附加的图标图像,该图像应该在所有屏幕中都具有响应能力,并且不应在任何屏幕中收缩或移动。总共有4张图片,其中1张是背景图片,另外3张是svg图标。

html - 在Ionic 4中的另一个图像上重叠svg图标。需要它具有响应能力-LMLPHP



 <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;
}

最佳答案

你所说的是一个矛盾。


“响应式”意味着它会进行调整。
“它不应收缩或移动”表示它没有响应。


ion-rowion-col功能用于构建响应结构。

如果您不想这样做,则只需将所有内容放在单个div中。

您可以将css white-space: nowrap;应用于div,以便无论显示大小如何都不会拆分内容。

09-30 16:41
查看更多