離子網格故障

Question

<ion-grid>

  <ion-row wrap style="background-color: #25dfc3">
    <ion-col>
      <ion-slides pager>
          <ion-slide>
            <h1>Slide 1</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 2</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 3</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 4</h1>
            </ion-slide>
        </ion-slides>
      </ion-col>
  </ion-row>

  <ion-row style="background-color: #ffffff;">
    <ion-col>Amethyst!</ion-col>
  </ion-row>

</ion-grid>

有沒有辦法讓我的第一行比第二行大？ 我一直在看很多教程，但似乎 flexbox 解決方案對我沒有幫助。

Answer 1

實際上，您可以在第一行中添加高度。

<ion-grid>

    <ion-row wrap style="background-color: #25dfc3; height: 300px;">
        <ion-col>
            <ion-slides pager>
                <ion-slide>
                    <h1>Slide 1</h1>
                </ion-slide>
                <ion-slide>
                    <h1>Slide 2</h1>
                </ion-slide>
                <ion-slide>
                    <h1>Slide 3</h1>
                </ion-slide>
                <ion-slide>
                    <h1>Slide 4</h1>
                </ion-slide>
            </ion-slides>
        </ion-col>
    </ion-row>

    <ion-row style="background-color: #ffffff;">
        <ion-col>Amethyst!</ion-col>
    </ion-row>

</ion-grid>

在此處查看： https : //stackblitz.com/edit/ionic-rhdvzq

Answer 2

我已經用 flex 解決了這個問題，如下所示：

<ion-grid>

  <ion-row class="top">
    <ion-col>
      <ion-slides pager>
          <ion-slide>
            <div class="sprite">

            </div>
          </ion-slide>
          <ion-slide>
            <h1>Slide 2</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 3</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 4</h1>
            </ion-slide>
        </ion-slides>
      </ion-col>
  </ion-row>


  <ion-row style="background-color: #ffffff;">
    <ion-col col-1></ion-col>
    <ion-col col-10>
        <button ion-button block (click)="login()"  >Inicia sesión con Facebook</button>
        <p></p>
        <button ion-button block  color="secondary" (click)="pushPage()" >Accesa con tu teléfono</button>
        <p></p>
        <a href="#">Términos y condiciones</a>
    </ion-col>
    <ion-col col-1></ion-col>
  </ion-row>

</ion-grid>

login-tutorial{
.top {
    flex: 4;
    background-color: #e8343b;
}

.button-block{
    margin-top: 14px;
}

a {
    text-align: center;
    font-size: .7em;

    float: left;
    margin-left: 30%;
    margin-top: 18%;

}

h1  {
    color: #fbb034;
}

.swiper-pagination-bullet-active {
    background: #fbb034;
    opacity: 1;
}

.sprite {
    width: 47.25px;
    height: 51px;

    /*margin-left: 42%;*/
    margin: auto;
    background-image: url("../../assets/imgs/babyL.png");

    animation: luigui 1s steps(11, end) infinite;
}

@keyframes luigui {
    from {
        background-position: 0px;
    }
    to{
        background-position: -549.25px;
    }
}
}

截圖 1

然后我將相同的代碼復制到另一個應用程序，但結果不同。 似乎 flex 不起作用......

截圖 2