如何實現這個佈局的移動菜單（引導）

即時通訊使用引導的導航欄。導航欄在較大的設備中可以使用，但在移動設備上，當navbar-toggler按鈕出現並單擊時，我想更改一些bootstrap默認移動菜單。如何實現這個佈局的移動菜單（引導）

我試着去實現點擊移動按鈕時，下面這個佈局：

菜單出現在右邊佔據只是一定寬度像200像素
菜單出現在前面的內容，而不是推下面
的內容和每個項目具有灰色邊界底部

你知道如何獲得這種佈局？

工作示例：使用以下，但沒有成功的代碼林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; 
}

來源

2017-12-27 JohnX

我已經更新了你的提琴

試試這個:)

@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 :)

來源

2017-12-27 13:27:39

如何實現這個佈局的移動菜單（引導）

回答

相關問題