Wie man Dropdown in Bootstrap 4 hinzufügt?

Question

Ich habe meine Bootstrap 3 Vorlage zu Bootstrap 4 Version aktualisieren. Jetzt Problem ist Untermenü (Drop-Down) in meiner Navigation Header funktioniert nicht in Bootstrap 4 und es funktioniert in Bootstrap 3. Wie Submenü für die Service-Liste in Bootstrap 4 hinzufügen? Hier ist mein Code,

<a class='navbar-brand' href='#'>Start Bootstrap</a> 
<button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarResponsive' aria-controls='navbarResponsive' aria-expanded='false' aria-label='Toggle navigation'> 
    <span class='navbar-toggler-icon'></span> 
</button> 
<div class='collapse navbar-collapse' id='navbarResponsive'> 
    <ul class='navbar-nav ml-auto'> 
    <li class='nav-item active'> 
     <a class='nav-link' href='#'>Home 
     <span class='sr-only'>(current)</span> 
     </a> 
    </li> 
    <li class='nav-item'> 
     <a class='nav-link' href='#'>About</a> 
    </li> 
    <li class='nav-item'> 
     <a class='nav-link' href='#'>Services</a> 
    </li> 

    <li class='nav-item'> 
     <a class='nav-link' href='#'>Contact</a> 
    </li> 
    </ul> 
</div> 

Answer 1

@Dinesh Kumar, hoffentlich Ihnen hilft. Ich habe eine codeply project mit dem Arbeitscode enthalten. Es nimmt den Code und fügt das folgende Markup nach Ihrem Kontaktliste-Artikel:

... 
     <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"> 
      Dropdown link 
     </a> 
     <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
      <a class="dropdown-item" href="#">Action</a> 
      <a class="dropdown-item" href="#">Another action</a> 
      <a class="dropdown-item" href="#">Something else here</a> 
     </div> 
     </li> 
... 

Answer 2

<div class="dropdown"> 
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Dropdown button 
    </button> 
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
    <a class="dropdown-item" href="#">Action</a> 
    <a class="dropdown-item" href="#">Another action</a> 
    <a class="dropdown-item" href="#">Something else here</a> 
    </div> 
</div>