回答編集履歴
2
修正
test
CHANGED
@@ -22,9 +22,33 @@
|
|
22
22
|
|
23
23
|
|
24
24
|
|
25
|
-
|
25
|
+
@media screen and (max-width: 575px) {
|
26
26
|
|
27
|
+
.four-cards .card {
|
28
|
+
|
27
|
-
bo
|
29
|
+
margin-bottom: 0;
|
30
|
+
|
31
|
+
}
|
32
|
+
|
33
|
+
|
34
|
+
|
35
|
+
.four-cards .card:first-child {
|
36
|
+
|
37
|
+
border-top-right-radius: 0;
|
38
|
+
|
39
|
+
border-bottom-right-radius: 0;
|
40
|
+
|
41
|
+
}
|
42
|
+
|
43
|
+
|
44
|
+
|
45
|
+
.four-cards .card:last-child {
|
46
|
+
|
47
|
+
border-top-left-radius: 0;
|
48
|
+
|
49
|
+
border-bottom-left-radius: 0;
|
50
|
+
|
51
|
+
}
|
28
52
|
|
29
53
|
}
|
30
54
|
|
@@ -32,9 +56,9 @@
|
|
32
56
|
|
33
57
|
```html
|
34
58
|
|
35
|
-
<div class="card-group rounded-bottom-0">
|
59
|
+
<div class="card-group rounded-bottom-0 flex-row four-cards">
|
36
60
|
|
37
|
-
<div class="card">
|
61
|
+
<div class="card flex-fill">
|
38
62
|
|
39
63
|
<div class="card-body">
|
40
64
|
|
@@ -44,7 +68,7 @@
|
|
44
68
|
|
45
69
|
</div>
|
46
70
|
|
47
|
-
<div class="card">
|
71
|
+
<div class="card flex-fill border-left-0">
|
48
72
|
|
49
73
|
<div class="card-body">
|
50
74
|
|
@@ -56,9 +80,9 @@
|
|
56
80
|
|
57
81
|
</div>
|
58
82
|
|
59
|
-
<div class="card-group rounded-top-0">
|
83
|
+
<div class="card-group rounded-top-0 flex-row four-cards">
|
60
84
|
|
61
|
-
<div class="card">
|
85
|
+
<div class="card flex-fill border-top-0">
|
62
86
|
|
63
87
|
<div class="card-body">
|
64
88
|
|
@@ -68,7 +92,7 @@
|
|
68
92
|
|
69
93
|
</div>
|
70
94
|
|
71
|
-
<div class="card">
|
95
|
+
<div class="card flex-fill border-top-0 border-left-0">
|
72
96
|
|
73
97
|
<div class="card-body">
|
74
98
|
|
@@ -81,5 +105,3 @@
|
|
81
105
|
</div>
|
82
106
|
|
83
107
|
```
|
84
|
-
|
85
|
-
ただし、上記は幅576px以上のデバイスのみで有効です。
|
1
追記
test
CHANGED
@@ -81,3 +81,5 @@
|
|
81
81
|
</div>
|
82
82
|
|
83
83
|
```
|
84
|
+
|
85
|
+
ただし、上記は幅576px以上のデバイスのみで有効です。
|