回答編集履歴

1

修正

2019/03/22 13:10

投稿

cerfweb
cerfweb

スコア1899

test CHANGED
@@ -1,6 +1,6 @@
1
1
  Bootstrapの```.col```は親要素に```.row```を指定すればうまく表示されます。
2
2
 
3
- あと、画面っぱいに表示するには```.container```ではなく```.container-fluid```が便利です。
3
+ 特定の範囲で余白が不必要な場合はx_xさんが書かれているようmax-widthを解除すれば大丈夫です
4
4
 
5
5
  ```html
6
6
 
@@ -42,22 +42,42 @@
42
42
 
43
43
  </div>
44
44
 
45
- </div><!-- これを追加 -->
45
+ </div><!-- /.row -->
46
46
 
47
47
  </div>
48
48
 
49
49
  </div>
50
50
 
51
- <div class="container-fluid description2 text-light text-center"><!-- .container-fluidに変更 -->
51
+ <div class="description2 text-light text-center"><!-- .containerを削除 -->
52
52
 
53
- <img src="img/PIcon.png" alt="box" class="pt-5 pb-4">
53
+ <div class="container"><!-- ここに.containerを追加 -->
54
54
 
55
- <h2 class="font-weight-bold pb-2">ギフトカードをもらったら...</h2>
55
+ <img src="img/PIcon.png" alt="box" class="pt-5 pb-4">
56
56
 
57
+ <h2 class="font-weight-bold pb-2">ギフトカードをもらったら...</h2>
58
+
57
- <h5 class="text-light">ログインあるいは利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</h5>
59
+ <h5 class="text-light">ログインあるいは利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</h5>
60
+
61
+ </div><!-- /.container -->
58
62
 
59
63
  </div>
60
64
 
61
65
 
62
66
 
63
67
  ```
68
+
69
+ ```css
70
+
71
+ @media screen and (max-width: 768px) {
72
+
73
+ /* 以下を追加 */
74
+
75
+ .container {
76
+
77
+ max-width: none;
78
+
79
+ }
80
+
81
+ }
82
+
83
+ ```