Ionic 2新的网格系统没有对齐按钮大小，就像responsive-sm一样

Question

我正在使用新的Ionic 2 grid system。我需要使用具有/usr/bin/sed属性的网格系统帮助处理按钮大小。当我使用col-sm行时，行内的按钮会自动排列宽度。如何通过新的网格系统实现这一目标？

新守则：

responsive-sm

包含<ion-row col-sm> <button ion-button icon-left> <ion-icon name="cloud-upload"></ion-icon> Upload files Firebase </button> <button ion-button icon-left color="danger"> <ion-icon name="remove-circle"></ion-icon> Clear files </button> </ion-row> 的旧代码：

responsive-sm

样品：

Answer 1

首先，ion-row不应包含col-sm属性。 ion-row清楚地定义了划线元素，而不是尺寸本身'。响应属性应放在ion-col中，以便根据窗口大小清楚地定义宽度步长。 ion-rows应包含top，center和bottom。

ion-buttons应包含响应属性或按钮应包含在ion-col中。

要添加的两个重要属性是col-12和col-sm，如此

<button ion-button col-12 col-sm> Upload files Firebase </ion-col>

<强> COL-12

此属性专门定义了多少列（12个中占12个）12是窗口的全长。

<强> COL-SM 这是与col-12一起使用的断点。

  

这告诉它占用12个列直到小断点，然后更改为等宽列。

这都是基于新的网格系统，其中包含您can view for more information的官方文档。

您可能希望在新网格系统中专门查看auto layout columns以了解您希望实现的目标。