在 Ionic Framework 中根据屏幕尺寸制作响应式网格组件

Question

我想在 Ionic 移动应用程序页面中制作一个基于屏幕尺寸的响应式网格组件。

我已经使用下面的代码实现了使用 Bootstrap 的网格系统。

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

但是有什么建议或指南可以在离子框架中实现这种设计吗？

Answer 1

以下是两种方式：

使用网格系统和响应式实用程序下载自定义 bootstrap 版本。
http://getbootstrap.com/customize/?id=11477931

基于 flex 显示的网格系统属性。
http://flexboxgrid.com/

在 Ionic Framework 中根据屏幕尺寸制作响应式网格组件

To make a responsive grid component based on screen size in an Ionic Framework

css

responsive-design

ionic-framework

ionic