twitter-bootstrap – Ionic 2响应式网格布局,根据屏幕大小固定

发布时间：2020-12-17 21:22:59 所属栏目：安全来源：网络整理

导读：我四处搜索但是找不到如何根据Ionic 2上的屏幕尺寸实现具有不同但预定数量的列的网格布局. 我需要的：我需要显示一个项目网格,在小屏幕宽度上有2列,在中等屏幕宽度上有3列,在大屏幕宽度上有4列.列宽度相等,将完全填满屏幕宽度.如果我使用Bootstrap,我会这样

我四处搜索但是找不到如何根据Ionic 2上的屏幕尺寸实现具有不同但预定数量的列的网格布局.

我需要的：
我需要显示一个项目网格,在小屏幕宽度上有2列,在中等屏幕宽度上有3列,在大屏幕宽度上有4列.列宽度相等,将完全填满屏幕宽度.如果我使用Bootstrap,我会这样做的.

<div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>

    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>

    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
</div>

我发现：我发现Ionic 2框架包含“responsive-sm”,“responsive-md”和“responsive-lg”属性,这些属性使具有多个列的行分成具有全屏宽度的单个列.但是没有办法修复列的数量,使其为X列数或1列.

解决方法

使用最新版本的Ionic,现在使用Grid API( https://ionicframework.com/docs/api/components/grid/Grid/)可以轻松完成.

这是一个示例代码.

<ion-grid>
    <ion-row wrap>
        <ion-col col-12 col-md-6 col-lg-4 col-xl-3 *ngFor="let package of arrayPackages">               
            <div text-center>
                <img [src]="package.urlImage">
            </div>
        </ion-col>
    </ion-row>
</ion-grid>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!