如何在 ionic 2 中显示 5-14 列表答案

【问题标题】：How to display a 5-14 column table in ionic 2如何在 ionic 2 中显示 5-14 列表
【发布时间】：2018-04-19 20:23:32
【问题描述】：

我有一个要求，目前我使用 ion-col 显示动态数据，在该列中显示超过 8 个字段，但它没有响应 & 在这里我需要一个建议如何显示使用 ionic 2 具有超过 5 个最多 14 个字段的表

【问题讨论】：

标签： ionic-framework ionic2

【解决方案1】：

如果您有最多 14 列的要求，那么您需要进行一些自定义。就像，您必须将 100% 宽度除以 14 (100/14= 7.14 %)，将 7.14% 的宽度分配给您正在使用的 div 或 td。并且您将能够在您的应用中管理 14 列。

 .div_width{
    width:7.14%;
    display:inline-block;
 }



 <ion-list>
   <ion-grid>
     <ion-row>
        <ion-col col-12 text-center>
          <div class="div_width">
            content here
          </div>
        </ion-col>
      </ion-row>
    </ion-grid> 
  </ion-list>

【讨论】：

【解决方案2】：

默认情况下，Ionic 2 网格带有 12 列模式，您可以使用 SASS 和样式指南进行更改

这是Number of columns 的链接。您只需在variables.scss 文件夹下的variables.scss 中添加以下代码即可：

$grid-columns: 14;

这将强制您的网格有 14 列而不是默认的 12 列。

关于 5 列的最小值，没有办法控制它，没有最小列值，您需要定期确保至少有 5 列，这样做的一种方法是使用总共会最终在屏幕上显示为 5 列，类似于：

<ion-grid>
  <ion-row>
    <!-- assuming you're using 14 columns, if you're not all col- attributes must be col-2 -->
    <ion-col col-3></ion-col>
    <ion-col col-3></ion-col>
    <ion-col col-3></ion-col>
    <ion-col col-3></ion-col>
    <ion-col col-2></ion-col>
  </ion-row>
</ion-grid>

希望这会有所帮助。

【讨论】：