离子网格麻烦

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