Question

我有一个要求，目前我正在使用 ion-col 显示动态数据，因为我显示超过8个字段的列，但它不是响应＆amp;响应＆amp;在这里我需要一个建议如何使用ionic 2显示一个超过5个最多14个字段的表

Answer 1

默认情况下，Ionic 2网格带有12列图案，您可以使用SASS ans样式指南更改它

这是Number of columns的链接。您需要做的只是在variables.scss theme文件夹下的$grid-columns: 14;添加以下代码：

<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>

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

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

<div id="lala"><p>I WANT</p> <ul><li>THIS</li></ul>. <p>All of them</p></div>

希望这有帮助。

Answer 2

如果您有最多14列要求，则需要进行一些自定义。比如，你必须将100％宽度除以14（100/14 = 7.14％），给你正在使用的div或td给出7.14％的宽度。并且您将能够在您的应用中管理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中显示5-14列表

2 个答案: