离子：堆叠和自​​定义大小的网格行

Question

我是Ionic 2的新手，我正面临着离子网的设计问题。

我想要三个元素。在平板电脑或更大的平板电脑上，它们应该排成一排（并排），但第一个元素的宽度应为80％，另外两个宽度应为10％。 在智能手机上，三行应水平堆叠。

根据the grid docu <ion-col col-12 col-sm>可以用于水平堆叠，它可以正常工作。

不幸的是，我无法实现80/10/10的设计。使用col-12 col-sm时，元素将以相等的宽度对齐。

Answer 1

使用breakpoints（例如col-md-8）。结合一组这些，您可以为不同的屏幕尺寸设置不同的列宽。

在我的示例col-12中，<ion-col>表示最小屏幕的列宽应为12（全宽）。除非存在另一个断点，否则此规则将适用于所有更大的屏幕。 col-md-8使<ion-col>在屏幕尺寸上的列宽为12，且min-width: 768px更大。

示例HTML：

<ion-grid>
    <ion-row>
      <ion-col col-12 col-md-8 style="background-color:blue; height:100px;"></ion-col>
      <ion-col col-12 col-md-2 style="background-color:green; height:100px;"></ion-col>
      <ion-col col-12 col-md-2 style="background-color:yellow; height:100px;"></ion-col>
    </ion-row>
</ion-grid>

<强>结果：

小屏幕：

更大的屏幕：

我的示例使用每行的默认列数12，这样就不能达到列的80％/ 10％/ 10％-width。但是您可以更改每行的列数来实现此目的，有关详细信息，请参阅documentation。