Question

我在设置页脚样式时遇到以下问题：

容器宽度是可变的。我必须在三列中包含三个div，如下所示：

桌面视图，768像素及以上：

<— width = 140px —> | <—text@link, width = auto —> | <— width = auto text @righ —>

请注意，第一列固定为140px（徽标）。第二列和第三列的糊状填充了父分区的其余部分。

移动视图：

<——— Width 100% content centered ——->
<——— Width 100% content centered ——->
<——— Width 100% content centered ——->

我这样做了：

HTML

<ion-row>
  <ion-col>
    <img [src]="logoUrl" [alt]="logoAlt">
  </ion-col>
  <ion-col >{{ copyright }}</ion-col>
  <ion-col>
    <a [href]="imprintUrl"><span> {{ imprint }} </span></a> &#183;
    <a [href]="dataProtectionUrl"><span> {{ dataProtection }} </span></a>
  </ion-col>
<ion-row>

CSS

ion-row {
  display: grid;
  grid-template-columns: 140px auto auto;

  ion-col:last-child {
    text-align: right;
  }
}

@media(max-width: 768px) {
  ion-row {
    display: initial !important
    col:first-child {
      padding-top: 50px;
    }

    ion-col {
      text-align: center;
    }
  }
}

它非常适合台式机，但是@media中的语句不会覆盖 display：grid

我在模仿Ionic 4 知道如何解决这个问题吗？

离子4使网格响应式

0 个答案: