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

时间:2018-08-11 17:35:08

标签: html5 css3 bootstrap-4

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

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

1 个答案:

答案 0 :(得分:2)

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

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