响应式网格/h1>
网格是一个强大的移动优先弹性箱系统,用于构建自定义布局。它由三个单元组成 - 一个
网格/a>
,,,,
行/a>
和
列)/a>
。列将扩展以填充其行,并将调整大小以适合其他列。它基于基于屏幕大小的12列布局,该布局具有不同的断点。可以使用CSS自定义列数。//p>
这个怎么运作/a>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第3个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第3章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
3 of 3
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
-
网格充当所有行和列的容器。网格占用其容器的全部宽度,但添加
固定的/code>
属性将指定每个屏幕大小的宽度,请参阅
网格大小/a>
以下。/li>
-
行是列的水平组,可正确地对准列。/li>
-
内容应放置在列内,只有列可以是行的直接子女。/li>
-
这
size- {断点}/code>
属性表示每行默认12列的列数。所以,
尺寸=“ 4”/code>
可以将其添加到列中,以占据网格的1/3,或12列中的4个。/li>
-
没有大小值的列将自动具有相等的宽度。例如,四个实例
大小SM/code>
对于小断点和向上,每个人都会自动宽25%。/li>
-
列的宽度设置为一个百分比,因此它们始终相对于其母元素而言是流体和大小。/li>
-
列之间有填充单个列之间的填充,但是,可以通过添加填充物从网格和列中删除填充物
离子非衬垫/code>
上课到网格。看到
CSS公用事业/a>
有关可以应用于网格的更多样式。/li>
-
有五个网格层,每个响应式断点:所有断点(超小),小,中,大和超大。/li>
-
网格层基于最小宽度,这意味着它们适用于他们的层,所有的层都比它们大(例如,例如,
size-sm =“ 4”/code>
适用于小型,中,大型设备)。/li>
-
网格可以通过CSS变量轻松自定义。看
自定义网格/a>
。/li>
现场示例/a>
您可以在Angular中查看这个现场示例
这里/a>
并进行反应
这里/a>
。/p>
网格大小/a>
默认情况下,网格将占100%的宽度。要根据屏幕大小设置特定宽度,请添加
固定的/code>
属性。每个断点的网格宽度在
-ion-Grid-Width- {brekaintpoint}/code>
CSS变量。有关更多信息,请参阅
自定义网格/a>
。/p>
姓名/th>
价值/th>
描述/th>
XS/td>
100%/td>
不要为XS屏幕设置网格宽度/td>
SM/td>
540px/td>
当(最小宽度:576px)时将网格宽度设置为540px/td>
MD/td>
720px/td>
将网格宽度设置为720px时(最小宽度:768px)/td>
LG/td>
960px/td>
当(最小宽度:992px)时将网格宽度设置为960px/td>
XL/td>
1140px/td>
将网格宽度设置为1140px时(最小宽度:1200px)/td>
现场示例/a>
您可以在Angular中查看这个现场示例
这里/a>
并进行反应
这里/a>
。/p>
网格属性/a>
默认情况下,网格占据屏幕的整个宽度。可以使用以下属性对此进行修改。//p>
财产/th>
描述/th>
固定的/td>
根据当前屏幕大小设置最大宽度。/td>
默认断点/a>
默认断点在下表中定义。目前无法定制断点。有关为什么无法定制它们的更多信息,请参见
媒体查询中的变量/a>
。/p>
姓名/th>
价值/th>
宽度前缀/th>
偏移前缀/th>
推上前缀/th>
拉前缀/th>
描述/th>
XS/td>
0/td>
尺寸-/code>
抵消-/code>
推-/code>
拉-/code>
设置列时(最小宽度:0)/td>
SM/td>
576px/td>
尺寸-SM-/code>
抵消SM-/code>
推-SM-/code>
拉-SM-/code>
设置列时(最小宽度:576px)/td>
MD/td>
768px/td>
尺寸-MD-/code>
抵消MD-/code>
推-MD-/code>
拉-MD-/code>
设置列时(最小宽度:768px)/td>
LG/td>
992px/td>
尺寸lg-/code>
抵消lg-/code>
推-lg-/code>
拉格 -/code>
设置列时(最小宽度:992px)/td>
XL/td>
1200px/td>
尺寸XL-/code>
抵消XL-/code>
推动XL-/code>
plup-xl-/code>
设置列时(最小宽度:1200px)/td>
自动列列/a>
相等的宽度/a>
默认情况下,对于所有设备和屏幕尺寸,列将在行内部占据相等的宽度。/p>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第2个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
2 of 2
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第3个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第3章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
3 of 3
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
设置一个列宽度/a>
设置一列的宽度,其他列将自动调整它的大小。这可以使用我们的预定义网格属性来完成。在下面的示例中,无论中心列的宽度如何,其他列将调整大小。//p>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第3个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
8
“/span>
>//span>
<//span>
div/span>
>//span>
3中的2(更宽)
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
3 of 3
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第3个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
6
“/span>
>//span>
<//span>
div/span>
>//span>
3中的2(更宽)
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
3 of 3
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
现场示例/a>
您可以在Angular中查看这个现场示例
这里/a>
并进行反应
这里/a>
。/p>
可变宽度/a>
通过设置
size- {断点}/code>
属性为
“汽车”/code>
该列可以根据其内容的自然宽度来大小。这对于使用像素设置列宽度非常有用。可变宽度列旁边的列将调整大小以填充行。//p>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第3个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
汽车
“/span>
>//span>
<//span>
div/span>
>//span>
可变宽度内容
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
3 of 3
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第4个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
汽车
“/span>
>//span>
<//span>
div/span>
>//span>
<//span>
离子输入/span>
占位符/span>
=//span>
“/span>
可变宽度输入
“/span>
>//span>
//span>
离子输入/span>
>//span>
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
4 of 4
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
现场示例/a>
您可以在Angular中查看这个现场示例
这里/a>
并进行反应
这里/a>
。/p>
响应属性/a>
所有断点/a>
要自定义所有设备和屏幕的列的宽度,请设置
尺寸/code>
财产。该属性的值确定本列应从总可用列中占用多少列。//p>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
4
“/span>
>//span>
<//span>
div/span>
>//span>
第4个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
2
“/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
2
“/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
4
“/span>
>//span>
<//span>
div/span>
>//span>
4 of 4
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
堆叠到水平/a>
使用宽度和断点属性的组合来创建一个网格,该网格始于在小屏幕上水平之前堆叠在多余的小屏幕上。/p>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
12
“/span>
大小SM/span>
>//span>
<//span>
div/span>
>//span>
第4个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
12
“/span>
大小SM/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
12
“/span>
大小SM/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
12
“/span>
大小SM/span>
>//span>
<//span>
div/span>
>//span>
4 of 4
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
现场示例/a>
您可以在Angular中查看这个现场示例
这里/a>
并进行反应
这里/a>
。/p>
重新排序/a>
抵消列/a>
通过添加
抵消/code>
财产。该属性增加了列的边距,指定列的数量。例如,在以下网格中,最后一列将被3列抵消,并占用3列://p>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
第2个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
抵消/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
2 of 2
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
还可以根据屏幕断点添加偏移。这是一个网格的示例,其中最后一列将被3列抵消
MD/code>
屏幕及向上:/p>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
尺寸-MD/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
第3个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸-MD/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
第3章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸-MD/span>
=//span>
“/span>
3
“/span>
Offset-MD/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
3 of 3
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
现场示例/a>
您可以在Angular中查看这个现场示例
这里/a>
并进行反应
这里/a>
。/p>
推和拉/a>
通过添加
推/code>
和
拉/code>
特性。这些属性调整了
剩下/code>
和
正确的/code>
通过指定数量的列的列的列,使重新排序列变得易于重新排序。例如,在下面的网格中,列与
第2个中的1/code>
描述实际上将是最后一列和
2 of 2/code>
将是第一列。/p>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
9
“/span>
推/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
第2个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
拉/span>
=//span>
“/span>
9
“/span>
>//span>
<//span>
div/span>
>//span>
2 of 2
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
也可以根据屏幕断点添加推和拉。在下面的示例中,带有
3 of 3/code>
列描述实际上将是第一列
MD/code>
屏幕及向上:/p>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
尺寸-MD/span>
=//span>
“/span>
6
“/span>
推-md/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
第3个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸-MD/span>
=//span>
“/span>
3
“/span>
推-md/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
第3章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸-MD/span>
=//span>
“/span>
3
“/span>
拉-MD/span>
=//span>
“/span>
9
“/span>
>//span>
<//span>
div/span>
>//span>
3 of 3
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
现场示例/a>
您可以在Angular中查看这个现场示例
这里/a>
并进行反应
这里/a>
。/p>
结盟/a>
垂直对齐/a>
可以通过向行中添加不同的类,将所有列在行内垂直对齐。有关可用类的列表,请参阅
CSS公用事业/a>
。/p>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
班级/span>
=//span>
“/span>
离子 - 阿里格项目开始
“/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第4个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
4 of 4
<//span>
br/span>
>//span>
#
<//span>
br/span>
>//span>
#
<//span>
br/span>
>//span>
#
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
<//span>
离子行/span>
班级/span>
=//span>
“/span>
离子 - 阿里格项目中心
“/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第4个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
4 of 4
<//span>
br/span>
>//span>
#
<//span>
br/span>
>//span>
#
<//span>
br/span>
>//span>
#
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
<//span>
离子行/span>
班级/span>
=//span>
“/span>
离子align-items-end
“/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第4个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
4 of 4
<//span>
br/span>
>//span>
#
<//span>
br/span>
>//span>
#
<//span>
br/span>
>//span>
#
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
通过将对齐类直接添加到列中,列也可以与其他列不同。有关可用类的列表,请参阅
CSS公用事业/a>
。/p>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
班级/span>
=//span>
“/span>
离子空位自我启动
“/span>
>//span>
<//span>
div/span>
>//span>
第4个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
班级/span>
=//span>
“/span>
离子空位自我中心
“/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
班级/span>
=//span>
“/span>
离子空位自我端
“/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
4 of 4
<//span>
br/span>
>//span>
#
<//span>
br/span>
>//span>
#
<//span>
br/span>
>//span>
#
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
现场示例/a>
您可以在Angular中查看这个现场示例
这里/a>
并进行反应
这里/a>
。/p>
水平对齐/a>
通过向行中添加不同的类,可以将所有列在行中水平对齐。有关可用类的列表,请参阅
CSS公用事业/a>
。/p>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
班级/span>
=//span>
“/span>
离子正义启动
“/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
第2个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
2 of 2
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
<//span>
离子行/span>
班级/span>
=//span>
“/span>
离子正式中心
“/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
第2个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
2 of 2
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
<//span>
离子行/span>
班级/span>
=//span>
“/span>
离子正义末端
“/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
第2个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
2 of 2
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
<//span>
离子行/span>
班级/span>
=//span>
“/span>
离子正交包围
“/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
第2个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
2 of 2
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
<//span>
离子行/span>
班级/span>
=//span>
“/span>
离子正式核对之间
“/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
第2个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
2 of 2
网格是一个强大的移动优先弹性箱系统,用于构建自定义布局。它由三个单元组成 - 一个
这个怎么运作/a>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第3个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第3章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
3 of 3
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
-
网格充当所有行和列的容器。网格占用其容器的全部宽度,但添加
固定的/code> 属性将指定每个屏幕大小的宽度,请参阅 网格大小/a> 以下。/li>
- 行是列的水平组,可正确地对准列。/li>
- 内容应放置在列内,只有列可以是行的直接子女。/li>
- 这
size- {断点}/code> 属性表示每行默认12列的列数。所以,
尺寸=“ 4”/code> 可以将其添加到列中,以占据网格的1/3,或12列中的4个。/li>
- 没有大小值的列将自动具有相等的宽度。例如,四个实例
大小SM/code> 对于小断点和向上,每个人都会自动宽25%。/li>
- 列的宽度设置为一个百分比,因此它们始终相对于其母元素而言是流体和大小。/li>
- 列之间有填充单个列之间的填充,但是,可以通过添加填充物从网格和列中删除填充物
离子非衬垫/code> 上课到网格。看到
CSS公用事业/a> 有关可以应用于网格的更多样式。/li>- 有五个网格层,每个响应式断点:所有断点(超小),小,中,大和超大。/li>
- 网格层基于最小宽度,这意味着它们适用于他们的层,所有的层都比它们大(例如,例如,
size-sm =“ 4”/code> 适用于小型,中,大型设备)。/li>
- 网格可以通过CSS变量轻松自定义。看 自定义网格/a> 。/li>
现场示例/a>
您可以在Angular中查看这个现场示例
这里/a>
并进行反应
这里/a>
。/p>
默认情况下,网格将占100%的宽度。要根据屏幕大小设置特定宽度,请添加
您可以在Angular中查看这个现场示例
这里/a>
并进行反应
这里/a>
。/p>
默认情况下,网格占据屏幕的整个宽度。可以使用以下属性对此进行修改。//p>
默认断点在下表中定义。目前无法定制断点。有关为什么无法定制它们的更多信息,请参见
默认情况下,对于所有设备和屏幕尺寸,列将在行内部占据相等的宽度。/p>
设置一列的宽度,其他列将自动调整它的大小。这可以使用我们的预定义网格属性来完成。在下面的示例中,无论中心列的宽度如何,其他列将调整大小。//p>
您可以在Angular中查看这个现场示例
这里/a>
并进行反应
这里/a>
。/p>
通过设置
您可以在Angular中查看这个现场示例
这里/a>
并进行反应
这里/a>
。/p>
要自定义所有设备和屏幕的列的宽度,请设置
使用宽度和断点属性的组合来创建一个网格,该网格始于在小屏幕上水平之前堆叠在多余的小屏幕上。/p>
您可以在Angular中查看这个现场示例
这里/a>
并进行反应
这里/a>
。/p>
通过添加
还可以根据屏幕断点添加偏移。这是一个网格的示例,其中最后一列将被3列抵消
您可以在Angular中查看这个现场示例
这里/a>
并进行反应
这里/a>
。/p>
通过添加
也可以根据屏幕断点添加推和拉。在下面的示例中,带有
您可以在Angular中查看这个现场示例
这里/a>
并进行反应
这里/a>
。/p>
可以通过向行中添加不同的类,将所有列在行内垂直对齐。有关可用类的列表,请参阅
通过将对齐类直接添加到列中,列也可以与其他列不同。有关可用类的列表,请参阅
您可以在Angular中查看这个现场示例
这里/a>
并进行反应
这里/a>
。/p>
通过向行中添加不同的类,可以将所有列在行中水平对齐。有关可用类的列表,请参阅
网格大小/a>
固定的/code>
属性。每个断点的网格宽度在
-ion-Grid-Width- {brekaintpoint}/code>
CSS变量。有关更多信息,请参阅
自定义网格/a>
。/p>
姓名/th>
价值/th>
描述/th>
XS/td>
100%/td>
不要为XS屏幕设置网格宽度/td>
SM/td>
540px/td>
当(最小宽度:576px)时将网格宽度设置为540px/td>
MD/td>
720px/td>
将网格宽度设置为720px时(最小宽度:768px)/td>
LG/td>
960px/td>
当(最小宽度:992px)时将网格宽度设置为960px/td>
XL/td>
1140px/td>
将网格宽度设置为1140px时(最小宽度:1200px)/td>
现场示例/a>
网格属性/a>
财产/th>
描述/th>
固定的/td>
根据当前屏幕大小设置最大宽度。/td>
默认断点/a>
姓名/th>
价值/th>
宽度前缀/th>
偏移前缀/th>
推上前缀/th>
拉前缀/th>
描述/th>
XS/td>
0/td>
尺寸-/code>
抵消-/code>
推-/code>
拉-/code>
设置列时(最小宽度:0)/td>
SM/td>
576px/td>
尺寸-SM-/code>
抵消SM-/code>
推-SM-/code>
拉-SM-/code>
设置列时(最小宽度:576px)/td>
MD/td>
768px/td>
尺寸-MD-/code>
抵消MD-/code>
推-MD-/code>
拉-MD-/code>
设置列时(最小宽度:768px)/td>
LG/td>
992px/td>
尺寸lg-/code>
抵消lg-/code>
推-lg-/code>
拉格 -/code>
设置列时(最小宽度:992px)/td>
XL/td>
1200px/td>
尺寸XL-/code>
抵消XL-/code>
推动XL-/code>
plup-xl-/code>
设置列时(最小宽度:1200px)/td>
自动列列/a>
相等的宽度/a>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第2个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
2 of 2
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第3个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第3章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
3 of 3
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
设置一个列宽度/a>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第3个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
8
“/span>
>//span>
<//span>
div/span>
>//span>
3中的2(更宽)
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
3 of 3
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第3个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
6
“/span>
>//span>
<//span>
div/span>
>//span>
3中的2(更宽)
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
3 of 3
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
现场示例/a>
可变宽度/a>
size- {断点}/code>
属性为
“汽车”/code>
该列可以根据其内容的自然宽度来大小。这对于使用像素设置列宽度非常有用。可变宽度列旁边的列将调整大小以填充行。//p>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第3个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
汽车
“/span>
>//span>
<//span>
div/span>
>//span>
可变宽度内容
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
3 of 3
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第4个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
汽车
“/span>
>//span>
<//span>
div/span>
>//span>
<//span>
离子输入/span>
占位符/span>
=//span>
“/span>
可变宽度输入
“/span>
>//span>
//span>
离子输入/span>
>//span>
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
4 of 4
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
现场示例/a>
响应属性/a>
所有断点/a>
尺寸/code>
财产。该属性的值确定本列应从总可用列中占用多少列。//p>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
4
“/span>
>//span>
<//span>
div/span>
>//span>
第4个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
2
“/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
2
“/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
4
“/span>
>//span>
<//span>
div/span>
>//span>
4 of 4
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
堆叠到水平/a>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
12
“/span>
大小SM/span>
>//span>
<//span>
div/span>
>//span>
第4个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
12
“/span>
大小SM/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
12
“/span>
大小SM/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
12
“/span>
大小SM/span>
>//span>
<//span>
div/span>
>//span>
4 of 4
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
现场示例/a>
重新排序/a>
抵消列/a>
抵消/code>
财产。该属性增加了列的边距,指定列的数量。例如,在以下网格中,最后一列将被3列抵消,并占用3列://p>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
第2个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
抵消/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
2 of 2
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
MD/code>
屏幕及向上:/p>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
尺寸-MD/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
第3个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸-MD/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
第3章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸-MD/span>
=//span>
“/span>
3
“/span>
Offset-MD/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
3 of 3
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
现场示例/a>
推和拉/a>
推/code>
和
拉/code>
特性。这些属性调整了
剩下/code>
和
正确的/code>
通过指定数量的列的列的列,使重新排序列变得易于重新排序。例如,在下面的网格中,列与
第2个中的1/code>
描述实际上将是最后一列和
2 of 2/code>
将是第一列。/p>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
9
“/span>
推/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
第2个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
拉/span>
=//span>
“/span>
9
“/span>
>//span>
<//span>
div/span>
>//span>
2 of 2
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
3 of 3/code>
列描述实际上将是第一列
MD/code>
屏幕及向上:/p>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
尺寸-MD/span>
=//span>
“/span>
6
“/span>
推-md/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
第3个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸-MD/span>
=//span>
“/span>
3
“/span>
推-md/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
第3章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸-MD/span>
=//span>
“/span>
3
“/span>
拉-MD/span>
=//span>
“/span>
9
“/span>
>//span>
<//span>
div/span>
>//span>
3 of 3
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
现场示例/a>
结盟/a>
垂直对齐/a>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
班级/span>
=//span>
“/span>
离子 - 阿里格项目开始
“/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第4个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
4 of 4
<//span>
br/span>
>//span>
#
<//span>
br/span>
>//span>
#
<//span>
br/span>
>//span>
#
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
<//span>
离子行/span>
班级/span>
=//span>
“/span>
离子 - 阿里格项目中心
“/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第4个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
4 of 4
<//span>
br/span>
>//span>
#
<//span>
br/span>
>//span>
#
<//span>
br/span>
>//span>
#
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
<//span>
离子行/span>
班级/span>
=//span>
“/span>
离子align-items-end
“/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第4个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
4 of 4
<//span>
br/span>
>//span>
#
<//span>
br/span>
>//span>
#
<//span>
br/span>
>//span>
#
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
班级/span>
=//span>
“/span>
离子空位自我启动
“/span>
>//span>
<//span>
div/span>
>//span>
第4个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
班级/span>
=//span>
“/span>
离子空位自我中心
“/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
班级/span>
=//span>
“/span>
离子空位自我端
“/span>
>//span>
<//span>
div/span>
>//span>
第4章
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
div/span>
>//span>
4 of 4
<//span>
br/span>
>//span>
#
<//span>
br/span>
>//span>
#
<//span>
br/span>
>//span>
#
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
现场示例/a>
水平对齐/a>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
班级/span>
=//span>
“/span>
离子正义启动
“/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
第2个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
2 of 2
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
<//span>
离子行/span>
班级/span>
=//span>
“/span>
离子正式中心
“/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
第2个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
2 of 2
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
<//span>
离子行/span>
班级/span>
=//span>
“/span>
离子正义末端
“/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
第2个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
2 of 2
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
<//span>
离子行/span>
班级/span>
=//span>
“/span>
离子正交包围
“/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
第2个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
2 of 2
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
<//span>
离子行/span>
班级/span>
=//span>
“/span>
离子正式核对之间
“/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
第2个中的1
//span>
div/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
div/span>
>//span>
2 of 2