layout.less
1.95 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
.@{row-prefix-cls} {
.make-row();
display: block;
&-flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
&:before,
&:after {
display: flex;
}
// x轴原点
&-start {
justify-content: flex-start;
}
// x轴居中
&-center {
justify-content: center;
}
// x轴反方向
&-end {
justify-content: flex-end;
}
// x轴平分
&-space-between {
justify-content: space-between;
}
// x轴有间隔地平分
&-space-around {
justify-content: space-around;
}
// 顶部对齐
&-top {
align-items: flex-start;
}
// 居中对齐
&-middle {
align-items: center;
}
// 底部对齐
&-bottom {
align-items: flex-end;
}
};
}
.@{col-prefix-cls} {
position: relative;
display: block;
}
.make-grid();
// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.
.make-grid(-xs);
// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
@media (min-width: @screen-sm-min) {
.make-grid(-sm);
}
// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
@media (min-width: @screen-md-min) {
.make-grid(-md);
}
// Large grid
//
// Columns, offsets, pushes, and pulls for the wide desktop device range.
@media (min-width: @screen-lg-min) {
.make-grid(-lg);
}
// Extra large grid
//
// Columns, offsets, pushes, and pulls for the full hd desktop device range.
@media (min-width: @screen-xl-min) {
.make-grid(-xl);
}
// Extra extra large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: @screen-xxl-min) {
.make-grid(-xxl);
}