css - 如何为移动菜单实现这种布局( Bootstrap )

Question

我正在为导航栏使用 Bootstrap 。导航栏在较大的设备上没问题，但在移动设备上，当导航栏切换按钮出现并被单击时，我想稍微更改一下 Bootstrap 默认移动菜单。

我试图在点击移动按钮时实现下面的布局:

• 菜单出现在右边，只占用一定的宽度，比如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

I've Updated your fiddle

试试这个:)

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