css - 如何在 ionic 网格中将所有列排成一行

Question

在我的 ionic 3 元素中，我想显示一个包含许多行和列的网格。由于列数较多，所以将列分成几部分，分几行显示。

如何压缩列的大小并在一行中显示所有的列？

.ts

  patternXY: any = [];
  patRowY = 120;
  patColX = 100;
  ...
  for(let y = 0; y < this.patRowY; y++) {
      let rowY = []
      for(let x = 0; x< this.patColX; x++){
        rowY.push(0)
      }
      this.patternXY.push(rowY);
    }

.html

<ion-grid >
  <ion-row *ngFor="let item of patternXY; index as i" no-padding>
    <ion-col *ngFor="let item of patternXY[i]; index as j" class="bgcolor" size="auto">
    </ion-col>
  </ion-row>
</ion-grid>

.sccs

.bgcolor {
  background: #cdcfd6;
}

ion-col {
  border: 0.1px solid #aeb7ca;
}

在上面的示例中，一行中的列数设置为 100。但是您可以看到第一行中只绘制了 30 列。第二行还有 30 个，第三行还有 30 个，第四行有 10 个。我希望所有 100 列都显示在一行中。这需要减少列的宽度。但我找不到解决方案。

Answer 1

正方形的大小来自内边距，默认内边距为 10px，您必须将其设置为较低的值或 0 以减小正方形的宽度。

我通过更改 CSS 的填充和 HTML 的 cols 数量在此页面上进行了尝试:https://ionicframework.com/docs/api/grid并且它在一行中不间断地显示所有列。

更详细的填充并不完全适用于 cols 本身(虽然可能取决于您的 CSS)但适用于包含的 div:

      .ion-col > div {
        background-color: #f7f7f7;
        border: solid 1px #ddd;
        padding: 10px;
      }

根据您的 CSS 和 HTML，所需的解决方案可能略有不同，但我希望您能理解。