时间戳

首页 > 解决方案 > 显示在桌面设备上的汉堡菜单

html - 显示在桌面设备上的汉堡菜单

问题描述

我有一个使用 bootstrap 4 和 BEM 方法的简单导航栏，当我运行我的应用程序时，汉堡菜单显示在桌面设备中，而不是被隐藏。

这是 jsfiddle 的链接：Bem Navbar menu

HTML

  <nav class="main-nav">
      <div class="main-nav__logo">
        <li class="main-nav__link">
          <a>Majeni</a>
        </li>
      </div>
      <button class="main-nav__toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
        aria-label="Toggle navigation">
        <span class="main-nav__icon navbar-toggler-icon"></span>
      </button>
      <div class="main-nav__collapse collapse" id="navbarNav">
        <ul class="main-nav__list ml-auto">
          <li class="main-nav__item--active">
            <a class="main-nav__link" href="#">Home
              <span class="main-nav__current sr-only">(current)</span>
            </a>
          </li>
          <li class="main-nav__item">
            <a class="main-nav__link" href="#">About us</a>
          </li>
          <li class="main-nav__item">
            <a class="main-nav__link" href="#">What we do</a>
          </li>
          <li class="main-nav__item">
            <a class="main-nav__link " href="#">Projects</a>
          </li>
          <li class="main-nav__item">
              <a class="main-nav__link " href="#">Contact</a>
            </li>
        </ul>
      </div>
    </nav>

css

   .main-nav {
        background-color: green;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        justify-content: flex-end;
        align-items: stretch;
        height: 50px;
        width: 100%;
        &__item{
                padding: 0 2em;
                background-color: #088887;
                display: flex ;
                align-items: center;
            }
        &__link{
            list-style-type: none;
            list-style: none;
        }

我在我的代码中做错了什么？任何帮助建议，如果有任何错误的方法，请纠正我。感谢

标签： htmlcssbootstrap-4

解决方案

看起来您缺少响应式课程，因此它将在您想要的设备上隐藏/可见。

如果您希望它仅在“xs”屏幕上可见，您将添加以下类：

.d-block .d-sm-none

这是一个更新的 JSFiddle（您可能需要展开窗口才能看到它消失） - https://jsfiddle.net/rjysf257/14/

从 Bootstrap 4 文档中提取：

隐藏元素为了更快的移动友好开发，使用响应式显示类按设备显示和隐藏元素。避免为同一站点创建完全不同的版本，而是针对每个屏幕尺寸响应地隐藏元素。

要隐藏元素，只需将 .d-none 类或 .d-{sm,md,lg,xl}-none 类之一用于任何响应式屏幕变化。

要仅在给定的屏幕尺寸间隔上显示元素，您可以将一个 .d- -none类与 .d- -* 类结合使用，例如 .d-none .d-md-block .d-xl-none 将隐藏所有屏幕尺寸的元素，除了中型和大型设备。

屏幕尺寸： 类

全部隐藏： .d-none

仅在 xs 上隐藏： .d-none .d-sm-block

仅在 sm 上隐藏： .d-sm-none .d-md-block

仅在 md 上隐藏： .d-md-none .d-lg-block

仅在 lg 上隐藏： .d-lg-none .d-xl-block

仅在 xl 上隐藏： .d-xl-none

全部可见： .d-block

仅在 xs 上可见： .d-block .d-sm-none

仅在 sm 上可见： .d-none .d-sm-block .d-md-none

仅在 md 上可见： .d-none .d-md-block .d-lg-none

仅在 lg 上可见： .d-none .d-lg-block .d-xl-none

仅在 xl 上可见： .d-none .d-xl-block

Bootstrap 4.0 实用程序：显示（隐藏元素）

推荐阅读