回答編集履歴
4
修正
test
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
Bootstrap 4 から、[`.col-xs-*`は`.col-*`というクラス名に変更されました](https://github.com/twbs/bootstrap/commit/08e36a3cc9f88077806efb5c69f02e1ca6e0b449)。また、適用されるブレイクポイントも Bootstrap 3 から変更されています([参考](https://getbootstrap.com/docs/4.1/layout/grid/#grid-options))。そのため、 Bootstrap 4 で Bootstrap 3 と同様の効果を得るためには、 HTML, CSS を以下のように記述する必要があります。
|
1
|
+
Bootstrap 4 から、[`.col-xs-*`は`.col-*`というクラス名に変更されました](https://github.com/twbs/bootstrap/commit/08e36a3cc9f88077806efb5c69f02e1ca6e0b449)。また、適用されるブレイクポイントも Bootstrap 3 から変更されています([参考](https://getbootstrap.com/docs/4.1/layout/grid/#grid-options))。そのため、 Bootstrap 4 で Bootstrap 3 と同様の効果を得るためには、 HTML, CSS を以下のように記述する必要があります(動作確認用リンク: [Bootstrap 4 版](https://codepen.io/anon/pen/xMZxwx), [Bootstrap 3 版](https://codepen.io/anon/pen/qgbBNO))。
|
2
2
|
|
3
3
|
|
4
4
|
|
3
修正
test
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
Bootstrap 4 から、[`.col-xs-*`は`.col-*`というクラス名に変更されました](https://github.com/twbs/bootstrap/commit/08e36a3cc9f88077806efb5c69f02e1ca6e0b449)。また、適用されるブレイクポイントも Bootstrap 3 から変更され
|
1
|
+
Bootstrap 4 から、[`.col-xs-*`は`.col-*`というクラス名に変更されました](https://github.com/twbs/bootstrap/commit/08e36a3cc9f88077806efb5c69f02e1ca6e0b449)。また、適用されるブレイクポイントも Bootstrap 3 から変更されています([参考](https://getbootstrap.com/docs/4.1/layout/grid/#grid-options))。そのため、 Bootstrap 4 で Bootstrap 3 と同様の効果を得るためには、 HTML, CSS を以下のように記述する必要があります。
|
2
2
|
|
3
3
|
|
4
4
|
|
2
追記
test
CHANGED
@@ -1 +1,35 @@
|
|
1
|
-
Bootstrap 4 から、[`.col-xs-*`は`.col-*`というクラス名に変更されました](https://github.com/twbs/bootstrap/commit/08e36a3cc9f88077806efb5c69f02e1ca6e0b449)。また、適用されるブレイクポイントも Bootstrap 3 から変更されたことに注意する必要があります([参考](https://getbootstrap.com/docs/4.1/layout/grid/#grid-options))。
|
1
|
+
Bootstrap 4 から、[`.col-xs-*`は`.col-*`というクラス名に変更されました](https://github.com/twbs/bootstrap/commit/08e36a3cc9f88077806efb5c69f02e1ca6e0b449)。また、適用されるブレイクポイントも Bootstrap 3 から変更されたことに注意する必要があります([参考](https://getbootstrap.com/docs/4.1/layout/grid/#grid-options))。そのため、 Bootstrap 4 で Bootstrap 3 と同様の効果を得るためには、 HTML, CSS を以下のように記述する必要があります。
|
2
|
+
|
3
|
+
|
4
|
+
|
5
|
+
```HTML
|
6
|
+
|
7
|
+
<div class="container">
|
8
|
+
|
9
|
+
<div class="row">
|
10
|
+
|
11
|
+
<div class="col-6 col-sm-6 col-md-4 bg-primary">あ</div>
|
12
|
+
|
13
|
+
<div class="col-6 col-sm-6 col-md-4 bg-danger">あ</div>
|
14
|
+
|
15
|
+
</div>
|
16
|
+
|
17
|
+
</div>
|
18
|
+
|
19
|
+
```
|
20
|
+
|
21
|
+
|
22
|
+
|
23
|
+
```CSS
|
24
|
+
|
25
|
+
@media (max-width: 767px) {
|
26
|
+
|
27
|
+
.container {
|
28
|
+
|
29
|
+
max-width: 100%;
|
30
|
+
|
31
|
+
}
|
32
|
+
|
33
|
+
}
|
34
|
+
|
35
|
+
```
|
1
修正
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
Bootstrap 4 から、`.col-xs-*`は`.col-*`というクラス名に変更されました
|
1
|
+
Bootstrap 4 から、[`.col-xs-*`は`.col-*`というクラス名に変更されました](https://github.com/twbs/bootstrap/commit/08e36a3cc9f88077806efb5c69f02e1ca6e0b449)。また、適用されるブレイクポイントも Bootstrap 3 から変更されたことに注意する必要があります([参考](https://getbootstrap.com/docs/4.1/layout/grid/#grid-options))。
|