Question

如何为此代码创建汉堡菜单？

<div class="container-fluid h-100">
    <div class="row h-100">
        <div class="collapse  d-md-flex h-100 box">
          <ul class="nav flex-column flex-nowrap h-100">
            <li class="nav-item h-25"><a class="nav-link h-100 " href="#">A </a></li>
            <li class="nav-item h-25 "><a class="nav-link h-100  " href="#">B</a></li>
            <li class="nav-item h-25"><a class="nav-link h-100 " href="#l">C</a></li>
            <li class="nav-item h-25"><a class="nav-link h-100" href="#">D</a></li>
          </ul>
        </div>
    </div>
</div>

有人可以帮忙吗？

Answer 1

基本上，您应该follow the documentation。您的代码应如下所示。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item">
      <a class="nav-link" href="#">A</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">B</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">C</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">D</a>
    </li>
  </ul>
</nav>

引导程序4上的汉堡包菜单

1 个答案: