wie dieses Layout für mobiles Menü (Bootstrap) zu erreichen

Question

Ich benutze Bootstrap für eine Navbar. Die Navbar ist in größeren Devives in Ordnung, aber auf mobilen Geräten, wenn der Navbar-Toggler-Button erscheint und geklickt wird, möchte ich ein wenig das Bootstrap-Standard-Mobile-Menü ändern.

Im Versuch, dieses Layout unten zu erreichen, wenn die mobile Schaltfläche geklickt wird:

• das Menü rechts erscheint nur eine bestimmte Breite wie 200px
• besetzte das Menü vor dem Inhalt angezeigt wird, nicht drängen der Gehalt unter
• und jedes Element haben einen grauen Rand-Boden

Wissen Sie, wie Sie dieses Layout bekommen? Im mit dem Code unten, aber ohne Erfolg:

Arbeitsbeispiel: https://jsfiddle.net/uu9fpt4o/

html

<div class="container px-0"> 
    <nav class="navbar navbar-expand-md navbar-light"> 

    <a class="navbar-brand font-weight-bold text-primary mr-auto" href="#">Logo</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 ml-auto d-flex align-items-lg-center ml-auto pull-right "> 

     <li class="nav-item"> 
      <a class="nav-link" href="#">Item 1<span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Item 2</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Item 3</a> 
     </li> 
     </ul> 
    </div> 
    </nav> 
</div> 
<div class="background"> 
    <div class="container"> 
    <div class="row"> 
     <div class="content col"> 
     Content 
     </div> 
    </div> 
    </div> 
</div> 

css

.navbar{ 
     border-bottom: 1px solid gray; 
} 

.background{ 
    background-color:orange; 
} 

.content{ 
    height:320px; 
} 

Answer 1

Ich habe Ihre Geige Aktualisiert

Try This :)

@media only screen and (max-width: 768px) { 
    /* For mobile phones: */ 
.navbar-collapse{ 
    position: absolute; 
    width : 40%; 
    z-index:2; 
    right :-16px; 
    top : 8px; 
} 
    .navbar-nav li { 
    border: 3px solid white; 
    } 
    .navbar-nav li:first-child { 
    border-bottom: 0px; 
    } 
    .navbar-nav li:last-child { 
    border-top: 0px; 
    } 
} 

Live Demo

https://jsfiddle.net/uu9fpt4o/4/

Glückliche Cssing :)