質問編集履歴

3

コード追加

2018/07/06 04:06

投稿

miupi
miupi

スコア6

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
- css
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

ソース、現象、やりたいことの追記

2018/07/06 04:05

投稿

miupi
miupi

スコア6

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,25 @@
2
2
 
3
3
 
4
4
 
5
+ 【現状】
6
+
5
- cssで横幅(min-width)設定して一段ずつ切り替わってしまい、上手くいきせんでした
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]="['./']">基本情報</a>
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
- </nav>
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

ソースの追記

2018/07/06 02:54

投稿

miupi
miupi

スコア6

test CHANGED
@@ -1 +1 @@
1
- bootstrap4/css/TypeScriptでstacktable.js機能は使用できるのか
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
+ }