how to make a 2-column responsive system using ionic

问题: I want to make a 2-column responsive system. I want the badge (2) to have a column of the exact size of the content of it and the column (1) has the space it deserves. how...

问题:

I want to make a 2-column responsive system. I want the badge (2) to have a column of the exact size of the content of it and the column (1) has the space it deserves. how can I do it? This is my code:enter image description here

    <ion-grid no-padding>
        <ion-row>
          <ion-col col-10>
            <h4 >
              <strong>{{ antecedentAlert.antPac.get_tipo_antecedente.nombre }}</strong>
              <span *ngIf="antecedentAlert.antPac.get_subtipo_antecedente != null">
                : {{ antecedentAlert.antPac.get_subtipo_antecedente.nombre }}
              </span>
                .
                .
                .
          </ion-col>
          <ion-col col-auto>
            <span class="contenedor-badge-icon">
              <ion-badge class="badge-estado-ant" color="azul-2" *ngIf="antecedentAlert.antPac.validado == 'validado' ">Validado</ion-badge>
                <ion-badge class="badge-estado-ant" color="danger" *ngIf="antecedentAlert.antPac.validado == 'no validado' ">No validado</ion-badge>
                <ion-badge class="badge-estado-ant" color="naranja-2" *ngIf="antecedentAlert.antPac.validado == 'pendiente' "><ion-icon class="candado-antecedentes" [name]="antecedentAlert.antPac.privado=='1'?'lock':''" [color]="white"></ion-icon>  Por validar</ion-badge>
            </span>
          </ion-col>
        </ion-row>
      </ion-grid>

Actual result:

enter image description here


回答1:

Change col-10 of column 1 to col-12 col-sm.


回答2:

What you need to do is replace col-10 for col-xs-10. When there's no breakpoint specified Ionic'll fallback to sm breakpoint, whose by default is (min-width: 576px), so that's why your grid breaks to a second row when in a small viewport device. This way the col-auto of your badges column will work perfectly.

Hope this helps.

  • 发表于 2018-07-14 03:13
  • 阅读 ( 264 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除