Bootstrap navbar dropdown login

Question

Ich möchte Anmelde- und Registrierungs-Dropdown-Formular erstellen. Ich habe mehrere Themen auf dieser Website gelesen und nichts schien für mich zu funktionieren.

Hier ist, wie es aussieht, zur Zeit:

ich das Formular will nur über Login-Link sein. Ich habe festgestellt, dass das Formular verschwindet, wenn ich auf Leerraum um die Eingabefelder Benutzername und Passwort klicke, und ich muss es erneut aufrufen, indem ich auf Login klicke. Wie repariere ich das?

Hier ist mein Code für navbar:

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

Und ein Code kurze CSS es um Stil:

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

Answer 1

Der nav Artikel der dropdown Klasse benötigt ..

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>