2017-12-27 19 views
0

即时通讯使用引导的导航栏。导航栏在较大的设备中可以使用,但在移动设备上,当navbar-toggler按钮出现并单击时,我想更改一些bootstrap默认移动菜单。如何实现这个布局的移动菜单(引导)

我试着去实现点击移动按钮时,下面这个布局:

  • 菜单出现在右边占据只是一定宽度像200像素
  • 菜单出现在前面的内容,而不是推下面
  • 的内容和每个项目具有灰色边界底部

enter image description here

你知道如何获得这种布局?

工作示例:使用以下,但没有成功的代码林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; 
} 

回答

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