モバイルメニュー（ブートストラップ）のレイアウトを実現する方法

Question

navbarにブートストラップを使用しています。 navbarは大きなdevivesではOKですが、モバイルデバイスでは、navbar-togglerボタンが表示されクリックされたときに、少しブートストラップのデフォルトのモバイルメニューを変更したいと思います。

モバイルボタンがクリックされたときに下にこのレイアウトを実現しようとしているイム：

• メニューは、メニューを押していない、コンテンツの前に表示さ200pxの
• のように右だけで一定の幅を占有しているに表示されます
• 以下コンテンツと各アイテムはグレーボーダー底を有する

このレイアウトを取得する方法は分かりますか？イム以下のコードを使用して、成功せず：

作業例：私はあなたのフィドルを更新した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

を

これを試してみてください:)

@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; 
    } 
} 

ライブデモ

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

ハッピーCssing :)