質問編集履歴

6

誤字の修正

2021/08/03 13:33

投稿

sumop
sumop

スコア10

test CHANGED
File without changes
test CHANGED
@@ -120,7 +120,7 @@
120
120
 
121
121
  ```
122
122
 
123
- `.nav {
123
+ .nav {
124
124
 
125
125
  margin: 0;
126
126
 

5

誤字の改善

2021/08/03 13:33

投稿

sumop
sumop

スコア10

test CHANGED
File without changes
test CHANGED
@@ -128,7 +128,7 @@
128
128
 
129
129
  }
130
130
 
131
- ``
131
+ ```
132
132
 
133
133
  が、bootstrap5を読み込み後、
134
134
 
@@ -148,7 +148,7 @@
148
148
 
149
149
  }
150
150
 
151
- ``
151
+ ```
152
152
 
153
153
  に上書きされていることに気づきました。
154
154
 

4

検証ツールで修正方法を確認しました

2021/08/03 13:31

投稿

sumop
sumop

スコア10

test CHANGED
File without changes
test CHANGED
@@ -111,3 +111,63 @@
111
111
 
112
112
 
113
113
  のように各ブロックが縦に並んでしまう状況です。
114
+
115
+
116
+
117
+ ### 追記3
118
+
119
+ 教えていただいたことを元に、検証ツールでCSSを調べていたところ
120
+
121
+ ```
122
+
123
+ `.nav {
124
+
125
+ margin: 0;
126
+
127
+ padding: 0;
128
+
129
+ }
130
+
131
+ ``
132
+
133
+ が、bootstrap5を読み込み後、
134
+
135
+ ```
136
+
137
+ .nav {
138
+
139
+ display: flex;
140
+
141
+ flex-wrap: wrap;
142
+
143
+ padding-left: 0;
144
+
145
+ margin-bottom: 0;
146
+
147
+ list-style: none;
148
+
149
+ }
150
+
151
+ ``
152
+
153
+ に上書きされていることに気づきました。
154
+
155
+ また、
156
+
157
+ flex-wrap: wrap;を消すか
158
+
159
+ flex-wrap: nowrap;に書き換えることにより
160
+
161
+ ヘッダーの崩れが治りました!
162
+
163
+
164
+
165
+ 教えていただいたお話を自分なりに考えた結果、グローバルナビゲーションのみにflex-wrap: nowrap;を更に上書きすることで
166
+
167
+ やりたい事ができるのではと考えたのですが
168
+
169
+ 実際に、どの場所にどのように上書きしたらよいのかが
170
+
171
+ やはり分かりません。
172
+
173
+ もう少しだけアドバイスを頂戴できないでしょうか。

3

リンクの修正

2021/08/03 13:30

投稿

sumop
sumop

スコア10

test CHANGED
File without changes
test CHANGED
@@ -98,7 +98,7 @@
98
98
 
99
99
  該当するCSSの記述がどうしても見つけられないので、比較のため、
100
100
 
101
- https://howcang.com/2021/06/05/lightningg3/
101
+ [https://howcang.com/2021/06/05/lightningg3/](https://howcang.com/2021/06/05/lightningg3/)
102
102
 
103
103
  さんのサンプルDEMO画面のナビゲーションメニューのリンクをお借りします。
104
104
 

2

参考HPを追記しました

2021/08/02 12:24

投稿

sumop
sumop

スコア10

test CHANGED
File without changes
test CHANGED
@@ -91,3 +91,23 @@
91
91
  の記述があったのですが、
92
92
 
93
93
  これがbootstrapを読み込むことによって変わってしまう原因なのでしょうか。
94
+
95
+
96
+
97
+ 追記2
98
+
99
+ 該当するCSSの記述がどうしても見つけられないので、比較のため、
100
+
101
+ https://howcang.com/2021/06/05/lightningg3/
102
+
103
+ さんのサンプルDEMO画面のナビゲーションメニューのリンクをお借りします。
104
+
105
+ このサンプルDEMO画面の右上にあるヘッダーナビゲーション(TOP、会社概要等)が
106
+
107
+ TOP
108
+
109
+ 会社概要
110
+
111
+
112
+
113
+ のように各ブロックが縦に並んでしまう状況です。

1

「崩れた」の内容について、具体的に説明しました

2021/08/02 12:22

投稿

sumop
sumop

スコア10

test CHANGED
File without changes
test CHANGED
@@ -47,3 +47,47 @@
47
47
  ヘッダーを崩さずにbootstrap5の機能を使うことは難しいのでしょうか。
48
48
 
49
49
  もしくは、bootstrap5の読み込み方法が間違っているのでしょうか。
50
+
51
+
52
+
53
+ ### 追記
54
+
55
+ 「崩れた」の具体的内容として、
56
+
57
+ lightning g3 のスターターテンプレートの初期状態で、ヘッダー右上に書くヘッダーナビゲーション(グローバルメニュー?)が横1列に並んでいるのですが
58
+
59
+ 上記の動作によって縦1列に並び変わってしまう。という状態です。
60
+
61
+ (bootstrap5のアコーディオンメニューと同じ、縦並びに変わってしまいます)
62
+
63
+
64
+
65
+ 検証ツールで確認したところ
66
+
67
+ ```
68
+
69
+ .vk-menu-acc {
70
+
71
+ position: relative;
72
+
73
+ }
74
+
75
+ .global-nav-list {
76
+
77
+ margin: 0 auto;
78
+
79
+ padding: 0;
80
+
81
+ display: flex;
82
+
83
+ list-style: none;
84
+
85
+ position: relative;
86
+
87
+ }
88
+
89
+ ```
90
+
91
+ の記述があったのですが、
92
+
93
+ これがbootstrapを読み込むことによって変わってしまう原因なのでしょうか。