Question

我使用bootstrap作为导航栏。导航栏在较大的设备中是可以的，但在移动设备上，当出现导航栏切换按钮并单击时，我想稍微更改一下自举默认移动菜单。

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

菜单右侧占据一定的宽度，如200px
菜单显示在内容前面，而不是按下面的内容
并且每个项目都有一个灰色的边框底部

你知道如何获得这种布局吗？我使用下面的代码，但没有成功：

HTML

const obj = { 
   cardControlItem: 'Tidak',
   cardDirectUseItem: 'Tidak',
   kbUnspscUuid: '6a564b8e-2976-4fde-8759-7951970d7500',
   substoreUuid: '2f2b04bb-8b80-4b1f-b827-bf20311e31ee',
   cardDetailMin: 654,
   cardDetailMax: 65,
   cardDetailIncrement: 754,
   cardDetailPriceOverall: 4534,
   cardDetailPriceUnit: 0,
   ltMeasurementMinUuid: 'fddca37a-d0a3-40a4-8537-e84375b01601',
   ltMeasurementMaxUuid: '2bc6d7d2-5167-4459-9910-a65839008afd' 
};

const keys = ['cardControlItem', 'cardDirectUseItem', 'kbUnspscUuid', 'substoreUuid', 'stockCardGroupUuid', 'stockCardBatchUuid'];

const mapped = keys.filter(key => obj.hasOwnProperty(key))
                   .reduce((acc, key) => { acc[key] = obj[key]; return acc }, {});

console.log(mapped);

CSS

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

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：）

如何实现移动菜单的这种布局（bootstrap）

1 个答案: