Question

我有一个使用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;
        }

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

Answer 1

看起来您缺少响应式类，这样它就可以在所需的设备上隐藏/可见。

如果您希望它仅在“ 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块

仅在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 Utilities: Display ( Hiding Elements )

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

1 个答案: