質問編集履歴
3
コード追加
test
CHANGED
File without changes
|
test
CHANGED
@@ -52,9 +52,9 @@
|
|
52
52
|
|
53
53
|
↓↓実際に書いたもの↓↓
|
54
54
|
|
55
|
-
【html】
|
56
55
|
|
57
56
|
|
57
|
+
```html
|
58
58
|
|
59
59
|
<header class="navbar navbar-light sticky-top bg-light flex-md-nowrap p-0 border-bottom">
|
60
60
|
|
@@ -140,11 +140,15 @@
|
|
140
140
|
|
141
141
|
|
142
142
|
|
143
|
+
```
|
144
|
+
|
143
145
|
----------------------------------------------------------------------------------------
|
144
146
|
|
145
147
|
|
146
148
|
|
149
|
+
|
150
|
+
|
147
|
-
|
151
|
+
```css
|
148
152
|
|
149
153
|
.main-margin-bottom {
|
150
154
|
|
@@ -191,3 +195,5 @@
|
|
191
195
|
padding-right: 1.5px !important;
|
192
196
|
|
193
197
|
}
|
198
|
+
|
199
|
+
```
|
2
ソース、現象、やりたいことの追記
test
CHANGED
File without changes
|
test
CHANGED
@@ -2,7 +2,25 @@
|
|
2
2
|
|
3
3
|
|
4
4
|
|
5
|
+
【現状】
|
6
|
+
|
5
|
-
|
7
|
+
画面サイズを縮小していくと、一段ずつ切り替わってしまいます。
|
8
|
+
|
9
|
+
(最初にログイン:が基本情報の下にきて、その次に最終ログイン日時:、最終的に上から書いたとおりの順番で表示される)
|
10
|
+
|
11
|
+
【やりたいこと】
|
12
|
+
|
13
|
+
画面サイズを縮小したときに、左側にあるサイドメニューがパッと表示されなくなって、同時にヘッダーのメニューがいっきに縦積み表示になるようにしたい。
|
14
|
+
|
15
|
+
|
16
|
+
|
17
|
+
●縮小されていない時
|
18
|
+
|
19
|
+
![縮小されていない時](35c746937d3fbe0c10a312f47ed5b93c.png)
|
20
|
+
|
21
|
+
●画面が縮小された時
|
22
|
+
|
23
|
+
![画面が縮小された時](d94ce28fb2700eb409dda3c87734dba1.png)
|
6
24
|
|
7
25
|
|
8
26
|
|
@@ -36,19 +54,17 @@
|
|
36
54
|
|
37
55
|
【html】
|
38
56
|
|
39
|
-
コード
|
40
57
|
|
41
|
-
|
42
|
-
|
43
|
-
<!-- navbar -->
|
44
58
|
|
45
59
|
<header class="navbar navbar-light sticky-top bg-light flex-md-nowrap p-0 border-bottom">
|
46
60
|
|
47
61
|
<nav class="w-100 nav-justified navbar navbar-expand-lg header-style">
|
48
62
|
|
49
|
-
<!-- brand -->
|
50
63
|
|
64
|
+
|
51
|
-
<a class="navbar-brand title-size title-font-size col-sm-3 col-md-2 mr-0" [routerLink]="
|
65
|
+
<a class="navbar-brand title-size title-font-size col-sm-3 col-md-2 mr-0" [routerLink]="
|
66
|
+
|
67
|
+
['./']">基本情報</a>
|
52
68
|
|
53
69
|
|
54
70
|
|
@@ -118,19 +134,17 @@
|
|
118
134
|
|
119
135
|
</ul>
|
120
136
|
|
121
|
-
|
122
|
-
|
123
|
-
|
137
|
+
</nav>
|
124
138
|
|
125
139
|
</header>
|
126
140
|
|
127
141
|
|
128
142
|
|
143
|
+
----------------------------------------------------------------------------------------
|
144
|
+
|
129
145
|
|
130
146
|
|
131
147
|
【css】
|
132
|
-
|
133
|
-
コード
|
134
148
|
|
135
149
|
.main-margin-bottom {
|
136
150
|
|
1
ソースの追記
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
ヘッダーの横表示されているメニューを、画面幅がある一定のサイズになったら縦に上から並べて表示したい
|
test
CHANGED
@@ -27,3 +27,153 @@
|
|
27
27
|
|
28
28
|
|
29
29
|
宜しくお願いします。
|
30
|
+
|
31
|
+
|
32
|
+
|
33
|
+
|
34
|
+
|
35
|
+
↓↓実際に書いたもの↓↓
|
36
|
+
|
37
|
+
【html】
|
38
|
+
|
39
|
+
コード
|
40
|
+
|
41
|
+
|
42
|
+
|
43
|
+
<!-- navbar -->
|
44
|
+
|
45
|
+
<header class="navbar navbar-light sticky-top bg-light flex-md-nowrap p-0 border-bottom">
|
46
|
+
|
47
|
+
<nav class="w-100 nav-justified navbar navbar-expand-lg header-style">
|
48
|
+
|
49
|
+
<!-- brand -->
|
50
|
+
|
51
|
+
<a class="navbar-brand title-size title-font-size col-sm-3 col-md-2 mr-0" [routerLink]="['./']">基本情報</a>
|
52
|
+
|
53
|
+
|
54
|
+
|
55
|
+
<ul class="navbar-nav mr-auto px-3">
|
56
|
+
|
57
|
+
<li class="nav-item text-nowrap ">
|
58
|
+
|
59
|
+
<a class="nav-link" role="button" (click)="openModal()">
|
60
|
+
|
61
|
+
ID:
|
62
|
+
|
63
|
+
<span class="text-primary">{{this.nameID}} </span>
|
64
|
+
|
65
|
+
<i class="fa fa-search fa-fw" aria-hidden="true"></i>
|
66
|
+
|
67
|
+
</a>
|
68
|
+
|
69
|
+
</li>
|
70
|
+
|
71
|
+
</ul>
|
72
|
+
|
73
|
+
|
74
|
+
|
75
|
+
<ul class="nav ml-auto">
|
76
|
+
|
77
|
+
<li class="nav-item px-2 text-nowrap ">
|
78
|
+
|
79
|
+
<span class="navbar-text">
|
80
|
+
|
81
|
+
ログイン:
|
82
|
+
|
83
|
+
<span class="text-primary">{{this.userName}}</span>さん
|
84
|
+
|
85
|
+
</span>
|
86
|
+
|
87
|
+
</li>
|
88
|
+
|
89
|
+
|
90
|
+
|
91
|
+
<li class="nav-item px-2 text-nowrap ">
|
92
|
+
|
93
|
+
<span class="navbar-text">
|
94
|
+
|
95
|
+
最終ログイン日時:
|
96
|
+
|
97
|
+
<span class="text-primary">{{this.lastLoginTime | date:"medium"}}</span>
|
98
|
+
|
99
|
+
</span>
|
100
|
+
|
101
|
+
</li>
|
102
|
+
|
103
|
+
</ul>
|
104
|
+
|
105
|
+
|
106
|
+
|
107
|
+
<ul class="navbar-nav px-3">
|
108
|
+
|
109
|
+
<li class="nav-item text-nowrap ">
|
110
|
+
|
111
|
+
<a class="nav-link" (click)="logout()">
|
112
|
+
|
113
|
+
<i class="fa fa-sign-out" aria-hidden="true"></i> ログアウト
|
114
|
+
|
115
|
+
</a>
|
116
|
+
|
117
|
+
</li>
|
118
|
+
|
119
|
+
</ul>
|
120
|
+
|
121
|
+
|
122
|
+
|
123
|
+
</nav>
|
124
|
+
|
125
|
+
</header>
|
126
|
+
|
127
|
+
|
128
|
+
|
129
|
+
|
130
|
+
|
131
|
+
【css】
|
132
|
+
|
133
|
+
コード
|
134
|
+
|
135
|
+
.main-margin-bottom {
|
136
|
+
|
137
|
+
margin-bottom: 52px;
|
138
|
+
|
139
|
+
}
|
140
|
+
|
141
|
+
|
142
|
+
|
143
|
+
.nav-margin-top {
|
144
|
+
|
145
|
+
margin-top: 48px;
|
146
|
+
|
147
|
+
}
|
148
|
+
|
149
|
+
|
150
|
+
|
151
|
+
.title-size{
|
152
|
+
|
153
|
+
min-width: 180px;
|
154
|
+
|
155
|
+
min-height: 21px;
|
156
|
+
|
157
|
+
}
|
158
|
+
|
159
|
+
|
160
|
+
|
161
|
+
.title-font-size{
|
162
|
+
|
163
|
+
font-size: 23px;
|
164
|
+
|
165
|
+
}
|
166
|
+
|
167
|
+
|
168
|
+
|
169
|
+
.header-style{
|
170
|
+
|
171
|
+
padding-top: 0px !important;
|
172
|
+
|
173
|
+
padding-bottom: 0px !important;
|
174
|
+
|
175
|
+
padding-left: 0px !important;
|
176
|
+
|
177
|
+
padding-right: 1.5px !important;
|
178
|
+
|
179
|
+
}
|