Ionic 3 ion-grid on ion-card align答案

【问题标题】：Ionic 3 ion-grid on ion-card alignIonic 3 ion-grid on ion-card align
【发布时间】：2018-03-27 11:23:31
【问题描述】：

如何对齐和修剪我的网格？列不正确，不在另一列之下，请选择分区。

<ion-card>
    <ion-card-header>
        <p style="margin-left: 5%"> last orders buy </p>
    </ion-card-header>
    <ion-card-content padding-right >
        <ion-grid style="width: ; "> 
            <ion-row>
                <ion-col col-1 style="font-size: 10px">
                    ID 
                </ion-col>
                <ion-col col-3 style="font-size: 10px">
                    Operação
                </ion-col>
                <ion-col col-1 style="font-size: 9px; margin-top: 1px">
                    De
                </ion-col>
                <ion-col col-1 style="font-size: 10px ">
                    P/
                </ion-col>
                <ion-col col-2 style="font-size: 10px">
                    Volume
                </ion-col>
                <ion-col col-2 style="font-size: 10px">
                    Valor
                </ion-col>
                <ion-col col-2 style="font-size: 10px">
                    Status
                </ion-col>
            </ion-row>
            <ion-row style="margin-left: -20px" *ngFor="let dado of dados" >
                <ion-list>
                    <ion-item-sliding #item>
                    <ion-item>
                    <ion-col col-1  style="font-size:10px">
                        #{{dado.id}}
                    </ion-col>
                    <ion-col col-3 style="font-size:10px">
                        {{dado.operation}}
                    </ion-col>
                    <ion-col col-1 style="font-size:10px">
                        {{dado.from_currency}}
                    </ion-col>
                    <ion-col col-1 style="font-size:10px">
                        {{dado.to_currency}}
                    </ion-col>
                    <ion-col col-2 style="font-size:10px">
                        {{dado.value_in_currency}}
                    </ion-col>
                    <ion-col col-2 style="font-size:10px">
                        {{dado.value_brl}}
                    </ion-col>
                    <ion-col col-2 style="font-size:10px">
                        {{dado.operation}}
                    </ion-col>
              </ion-item> 
          <ion-item-options side="right">
              <button ion-button color="danger" (click)="share(item)">Cancelar</button>
          </ion-item-options>
      </ion-item-sliding>
                </ion-list>
            </ion-row>
        </ion-grid>
    </ion-card-content>
</ion-card>

【问题讨论】：

你想要像图片显示..？
是的，如果可能的话，它必须有 10 个声望
提供您的 .ts 文件
如果你去掉 item-sliding 那么它看起来很好
如果你有帮助或得到结果然后接受它........并给它接受刻度标记

标签： css ionic-framework ionic3

【解决方案1】：

如果你去掉这个滑动它看起来很好

.html 中的更改

<ion-content no-padding>

  <ion-card no-padding>
    <ion-card-header>
       <p style="margin-left:-9px;"> last orders buy  </p>
    </ion-card-header>

    <ion-card-content no-padding>
      <ion-grid> 
        <ion-row>
          <ion-col col col-1 style="font-size: 10px">
            ID 
          </ion-col>
          <ion-col col col-2 style="font-size: 10px">
                Operação
          </ion-col>
          <ion-col style="font-size: 9px;">
              De
          </ion-col>
          <ion-col style="font-size: 10px ">
              P/
          </ion-col>
          <ion-col col col-2 style="font-size: 10px">
              Volume
          </ion-col>
          <ion-col col col-2 style="font-size: 10px">
              Valor
          </ion-col>

          <ion-col style="font-size: 10px">
              Status
          </ion-col>
        </ion-row>


        </ion-grid>

        <ion-grid>

              <ion-row *ngFor="let dado of dados">

             <ion-col col col-1  style="font-size:10px;">
            #{{dado.id}}
            </ion-col>
           <ion-col col col-2 style="font-size:10px">
    {{dado.operation}}
            </ion-col>
             <ion-col style="font-size:10px">
    {{dado.from_currency}}
            </ion-col>
             <ion-col style="font-size:10px">
    {{dado.to_currency}}
            </ion-col>
             <ion-col col-2 style="font-size:10px">
    {{dado.value_in_currency}}
            </ion-col>
             <ion-col col-2 style="font-size:10px">
    {{dado.value_brl}}
            </ion-col>
             <ion-col style="font-size:10px">
    {{dado.operation}}
            </ion-col>
        </ion-row>

      </ion-grid>

    </ion-card-content>
  </ion-card>
</ion-content>

结果

【讨论】：