Bootstrap導航欄下拉登錄

Question

我想創建登錄和註冊下拉窗體。我在這個網站上閱讀了多個主題，似乎沒有什麼能爲我工作。

這是它目前的樣子：

我希望表單只是上面登錄鏈接。我注意到，當我點擊用戶名和密碼輸入字段的空格時，表單消失，我必須通過單擊登錄再次提醒它。我如何解決這個問題？

這裏是我的導航欄代碼：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
<a class="navbar-brand" href="#"><img src="http://shrani.si/f/46/2Q/2Ps2wfOq/camera.png"></a> 
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
<span class="navbar-toggler-icon"></span> 
</button> 
<div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item active"> 
      <a class="nav-link" href="#">Photo Master</span></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Upload Your Own</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Contact</a> 
     </li> 
    </ul> 
    <ul class="navbar-nav mr-right"> 
     <li class="nav-item"> 
      <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Login 
      </a> 
      <div class="dropdown-menu" style="padding: 15px; padding-bottom: 10px;"> 
       <form class="form-horizontal" method="post" accept-charset="UTF-8"> 
        <input class="form-control login" type="text" name="username" placeholder="Username.." /><br> 
        <input class="form-control login" type="password" name="password" placeholder="Password.."/><br> 
        <input class="btn btn-primary" type="submit" name="submit" value="Login" /> 
       </form> 
      </div> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Register 
      </a> 
     </li> 
    </ul> 
    <form class="form-inline my-2 my-lg-0"> 
     <input class="form-control mr-sm-2" type="text" placeholder="Search..." aria-label="Search"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
    </form> 
</div> 

和短CSS代碼樣式吧：

.login { 
    margin-bottom:5px; 
} 
.dropdown-menu { 
    width: 300px !important; 
} 

Answer 1

的導航項目需要dropdown類..

https://www.codeply.com/go/o7Ys06Z3c9

 <li class="nav-item dropdown"> 
      <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Login 
      </a> 
      <div class="dropdown-menu" style="padding: 15px; padding-bottom: 10px;"> 
       <form class="form-horizontal" method="post" accept-charset="UTF-8"> 
        <input class="form-control login" type="text" name="username" placeholder="Username.."><br> 
        <input class="form-control login" type="password" name="password" placeholder="Password.."><br> 
        <input class="btn btn-primary" type="submit" name="submit" value="Login"> 
       </form> 
      </div> 
     </li>