回答編集履歴

2

修正

2019/02/12 15:12

投稿

cerfweb
cerfweb

スコア1899

test CHANGED
@@ -22,9 +22,33 @@
22
22
 
23
23
 
24
24
 
25
- .card-group + .card-group .card {
25
+ @media screen and (max-width: 575px) {
26
26
 
27
+ .four-cards .card {
28
+
27
- border-top: 0;
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

追記

2019/02/12 15:12

投稿

cerfweb
cerfweb

スコア1899

test CHANGED
@@ -81,3 +81,5 @@
81
81
  </div>
82
82
 
83
83
  ```
84
+
85
+ ただし、上記は幅576px以上のデバイスのみで有効です。