質問編集履歴

3

2019/09/13 05:08

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -27,6 +27,10 @@
27
27
  ![イメージ説明](98d64dea6c62b36964bcb885190336d6.jpeg)
28
28
 
29
29
  padding15pxは削除できないのでしょうか?
30
+
31
+ またPCでみると文字が左揃えで小さくなってしまいます。PCの時だけ文字フォントを12pxという風に変更できますか?
32
+
33
+
30
34
 
31
35
 
32
36
 

2

ああ

2019/09/13 05:08

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,42 @@
1
+ #追記
2
+
3
+
4
+
5
+ ![イメージ説明](70d15607888a2a1b2ec691b69bd0a610.jpeg)
6
+
7
+
8
+
9
+ スマホの表示でかなり要件にちかくなりました。ありがとうございます。
10
+
11
+ 文字表記が
12
+
13
+
14
+
15
+ テストその
16
+
17
+ 1です
18
+
19
+
20
+
21
+ という風に左揃えになりますので中央揃えになりますでしょうか?
22
+
23
+ またそれぞれメニューの表記と表記の間に余分な余白があるように思いました。
24
+
25
+ そこでchrome検証をすると以下のように緑部分が邪魔をしています。
26
+
27
+ ![イメージ説明](98d64dea6c62b36964bcb885190336d6.jpeg)
28
+
29
+ padding15pxは削除できないのでしょうか?
30
+
31
+
32
+
33
+
34
+
1
35
  お世話になります。bootstrapを活用しフッターメニューを横一列に表示させたいです。よろしくお願いいたします。
36
+
37
+
38
+
39
+
2
40
 
3
41
 
4
42
 

1

123

2019/09/13 05:05

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- レスポンシブデザイン BOOTSTRAP フッターメニューが縦にな
1
+ レスポンシブデザイン BOOTSTRAP スマホ閲覧時にフッターメニューが縦になってしまう。
test CHANGED
@@ -1,10 +1,20 @@
1
- #やたいこと フッターを均等で横に表示させたい。
1
+ お世話になます。bootstrapを活用しフッターメニューを横一列に表示させたいですよろしくお願いいたします。
2
2
 
3
3
 
4
4
 
5
5
 
6
6
 
7
+ #やりたいこと フッターを1行で均等に4つ横に表示させたいです。
8
+
9
+
10
+
11
+ 以下の写真をご覧ください。現在フッターを「PCで表示した時」フッターは以下の赤矢印のように1行で中央揃えに表示しています。
12
+
13
+ これと全く同じフッターの表示方法を「PCで表示した時」だけではなく「スマホで表示した時」も実装したいです。
14
+
7
- PCで表示させた時は以下の赤矢印のように中央揃えになっています。これは私がやりたい挙動です。
15
+ **つまりスマホで表示た時赤矢印のように1行で中央揃えに表示したいです。**
16
+
17
+
8
18
 
9
19
 
10
20
 
@@ -12,7 +22,11 @@
12
22
 
13
23
 
14
24
 
25
+ #できないこと
26
+
27
+
28
+
15
- しかしスマホ(レスポンシブ)すると以下のようにフッターが縦に表示なってしまいます。
29
+ スマホ(レスポンシブ)で閲覧をすると以下のようにフッターが縦に表示てしまいます。
16
30
 
17
31
 
18
32
 
@@ -20,11 +34,13 @@
20
34
 
21
35
 
22
36
 
23
- スマホでもPCと同様に1行で4つフッターにメニューを表示させたいです。
37
+ スマホでもPCと同様に上記の猫の写真のように1行で4つ項目が表示されるフッター表示としたいです。
24
38
 
25
39
 
26
40
 
27
41
  #ためしたこと
42
+
43
+ bootstrapを利用しています。htmlとcssを記載いたします。
28
44
 
29
45
 
30
46
 
@@ -54,7 +70,7 @@
54
70
 
55
71
  </div>
56
72
 
57
- <div class="col-lg-3 pink">
73
+ <div class="col-lg-3 skyblue">
58
74
 
59
75
  col-lg-3
60
76
 
@@ -67,3 +83,37 @@
67
83
  </footer>
68
84
 
69
85
  ```
86
+
87
+
88
+
89
+ css
90
+
91
+ ```ここに言語を入力
92
+
93
+ /* フッター */
94
+
95
+ .footer {
96
+
97
+ background-color: #f5f5f5;
98
+
99
+ }
100
+
101
+
102
+
103
+ .footer_container {
104
+
105
+ width: auto;
106
+
107
+ max-width: 680px;
108
+
109
+ padding: 0 15px;
110
+
111
+ width:700px;
112
+
113
+ margin-right: auto;
114
+
115
+ margin-left : auto;
116
+
117
+ }
118
+
119
+ ```