質問編集履歴
1
ソースを更新
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -7,33 +7,35 @@
|
|
|
7
7
|
|
|
8
8
|
```haml
|
|
9
9
|
%nav.navbar.navbar-header.navbar-expand-lg.fixed-top
|
|
10
|
-
.col-
|
|
10
|
+
.col-12
|
|
11
|
-
%a{:href => "
|
|
11
|
+
%a.navbar-brand.align-items-left{:href => "/"}
|
|
12
|
-
= image_tag("logo.png",
|
|
12
|
+
= image_tag("logo.png", width: '100%',alt: "logo")
|
|
13
|
-
|
|
13
|
+
.text-rigth
|
|
14
|
-
|
|
14
|
+
メールはこちら
|
|
15
|
-
|
|
15
|
+
|
|
16
|
-
//ここから二段目
|
|
17
|
-
|
|
16
|
+
#navbarSupportedContent.collapse.navbar-collapse
|
|
18
|
-
|
|
17
|
+
%ul.navbar-nav.mx-auto
|
|
19
|
-
|
|
18
|
+
%li.nav-item.active.justify-content-center.align-items-center
|
|
20
|
-
|
|
19
|
+
%a.nav-link{:href => "#"}
|
|
21
|
-
|
|
20
|
+
ナビ１
|
|
21
|
+
%li.nav-item.justify-content-center
|
|
22
|
-
|
|
22
|
+
%a.nav-link{:href => "#"} ナビ２
|
|
23
|
-
|
|
23
|
+
%li.nav-item.justify-content-center
|
|
24
|
-
|
|
24
|
+
%a.nav-link{:href => "#"} ナビ３
|
|
25
|
-
|
|
25
|
+
%li.nav-item.justify-content-center
|
|
26
|
-
|
|
26
|
+
%a.nav-link{:href => "#"} ナビ４
|
|
27
|
-
|
|
27
|
+
%li.nav-item.justify-content-center
|
|
28
|
-
|
|
28
|
+
%a.nav-link{:href => "#"} ナビ５
|
|
29
|
-
|
|
29
|
+
|
|
30
30
|
```
|
|
31
31
|
|
|
32
32
|
### できたこと
|
|
33
|
-
|
|
33
|
+
ナビを５つ２段目に並べることができた
|
|
34
34
|
|
|
35
|
+
### できないこと
|
|
36
|
+
メールが画像と同じ並び且つ右寄せ
|
|
37
|
+
|
|
35
38
|
### 調べたこと
|
|
36
|
-
|
|
37
39
|
flex-column を navbar-collapseに入れてみて２段になりましたが、
|
|
38
40
|
ロゴの横にナビが来てしまった。
|
|
39
41
|
|