teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

修正

2020/09/10 14:03

投稿

n-choco
n-choco

スコア7

title CHANGED
File without changes
body CHANGED
@@ -12,47 +12,20 @@
12
12
  <head>
13
13
  <meta charset="utf-8">
14
14
  <meta name="viewport" content="width=device-width, initial-scale=1">
15
- <title></title>
16
15
  </head>
17
16
  <body>
18
- <div id="app">
17
+ <div id="app" class="container-fluid">
19
18
  <div class="row">
20
- <div class="card col-3 px-0 border-0 rounded-0 Nav">
19
+ <div class="card col-3 px-0 border-0 rounded-0">
20
+ <ul class="list-group list-group-flush">
21
+ <li class="list-group-item"><a href="#"><i class="fas fa-unlock-alt fa-fw"></i>Login</a></li>
22
+ <li class="list-group-item"><a href="#" ><i class="fas fa-user fa-fw"></i>会員登録</a></li>
23
+ </ul>
21
24
  </div>
22
25
  <div class="col-9 px-0">
23
- <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm px-0">
24
- <div class="container">
25
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
26
- <span class="navbar-toggler-icon"></span>
27
- </button>
28
- <div class="collapse navbar-collapse" id="navbarSupportedContent">
29
- <!-- Left Side Of Navbar -->
30
- <ul class="navbar-nav mr-auto"></ul>
31
- <!-- Right Side Of Navbar -->
32
- <ul class="navbar-nav ml-auto">
33
- <!-- Authentication Links -->
34
- <li class="nav-item">
35
- <a class="nav-link" href="//localhost:3000/login">Login</a>
36
- </li>
37
- <li class="nav-item">
38
- <a class="nav-link" href="//localhost:3000/register">会員登録</a>
39
- </li>
40
- </ul>
41
- </div>
42
- </div>
43
- </nav>
44
- <main class="content px-0">
45
- <div class="container">
46
- <div class="row justify-content-center">
47
- <div class="col-md-8">
48
- <div class="card">
49
- <!-- -->
50
- </div>
51
- </div>
52
- </div>
53
- </div>
26
+ <main class="content px-0 mt-5">
27
+ <!-- -->
54
28
  </main>
55
- <footer class="container text-center"></footer>
56
29
  </div>
57
30
  </div>
58
31
  </div>

1

追記

2020/09/10 14:03

投稿

n-choco
n-choco

スコア7

title CHANGED
File without changes
body CHANGED
@@ -59,4 +59,7 @@
59
59
  </body>
60
60
  </html>
61
61
 
62
- ```
62
+ ```
63
+
64
+ 変更後、以下の様にnavに余白が生まれてしまう。
65
+ ![イメージ説明](ac1911f4069d5172436ac8703dcaab65.png)