离子网格问题答案

【问题标题】：Ionic grid trouble离子网格问题
【发布时间】：2018-02-20 13:52:54
【问题描述】：

<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 解决方案对我没有帮助。

【问题讨论】：

更大的意思是增加高度？
您需要提供重现问题的工作代码 sn-p。

标签： ionic-framework ionic2 flexbox row ion-grid

【解决方案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

【讨论】：

【解决方案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;
    }
}
}

screenshot 1

然后我将相同的代码复制到另一个应用程序，但是结果不同。好像 flex 不工作了...

screenshot 2

【讨论】：