css 最大化离子网格中的列数(24列)(自定义离子网格列)

vlf7wbxs 于 2023-02-01 发布在其他

关注(0)|答案(3)|浏览(126)

你能告诉我怎么可能有一个24列的离子网格吗？在离子页面（https://ionicframework.com/docs/layout/grid）上，我可以找到属性“--ion-grid-columns”，它位于标题“列数”下。但是，没有如何使用它的示例。而且网页上还说，可以根据您的首选列数定制网格。
你是这样使用房产的吗？
在html中

<ion-grid class="myGrid">
     <ion-row>
      <ion-col>Example</ion-col>
    (24 times ...)
      </ion-row>
    </ion-grid>

在css.文件中

.myGrid{
--ion-grid-columns: 24;
}

然而，用这种方法。这对我的网格没有任何影响。你怎么能在离子网格中定义24列呢？非常感谢。

css

来源：https://stackoverflow.com/questions/68999056/maximize-number-of-columns-24-columns-in-ion-grid-customize-ion-grid-columns

3条答案

按热度按时间

ve7v8dk21#

在离子列中放置size=“1”，它将工作：

<ion-grid>
  <ion-row>
    <ion-col size="1">
      your content
    </ion-col>
  </ion-row>
</ion-grid>

赞(0）回复(0）举报 2023-02-01

oyjwcjzk2#

确保在ion-col上指定size。
CSS文件：

ion-grid {
    --ion-grid-columns: 24;
}

HTML文件：

<ion-grid>
  <ion-row>
    <ion-col *ngFor="let column of [].constructor( 24 ); index as i" size="1">
      {{ i }}
    </ion-col>
  </ion-row>
</ion-grid>