如何实现移动菜单的这种布局（引导程序）答案

【问题标题】：how to achieve this layout for mobile menu (bootstrap)如何实现移动菜单的这种布局（引导程序）
【发布时间】：2017-12-27 21:35:03
【问题描述】：

我正在使用引导程序作为导航栏。导航栏在较大的设备中还可以，但在移动设备上，当出现并单击导航栏切换按钮时，我想稍微更改引导默认移动菜单。

当点击移动按钮时，我试图在下面实现这个布局：

菜单显示在右侧，仅占一定宽度，例如 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;
}

【问题讨论】：

标签： css twitter-bootstrap

【解决方案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 快乐 :)

【讨论】：