Question

首次使用Bootstrap 4，我尝试在Bs3中做一些非常简单的事情：当屏幕尺寸为xs时，我希望导航栏中的链接项折叠为汉堡菜单。

现在documentation和another answer触及了这一点，但我似乎正在关注正确的类，但是当屏幕大小为XS时，链接项不会崩溃 - 它们只是消失。

以下是完整视图的JSFiddle with CSS，但这是我使用导航栏所做的事情：

<nav class="navbar navbar-full navbar-light" style="background-color: #E4491C; padding: 0px;">
  <p id="toptext">Test</p>
</nav>
<nav class="navbar navbar-full navbar-light" style="background-color: #002b52">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <a class="navbar-brand" href="#">TopDog</a>
      <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar">
          <ul class="nav navbar-nav">
              <li class="nav-item"><a class="pull-sm-right navbar-brand2" href="#">Contact</a></li>
              <li class="nav-item"><a class="pull-sm-right navbar-brand2" href="#">About</a></li>
          </ul>
    </div>
    </div>
  </nav>

所以我使用toggleable类，我将这些指定为链接项;我能发现的唯一区别是我也在使用pull-sm-right类，它应该将链接带到导航的右侧。删除它们并没有解决问题。

问题：当我调整页面大小时，为什么Bootstrap无法将这些链接显示为可折叠菜单？

Answer 1

因为它是响应式菜单。链接达到768像素时隐藏链接，导航栏标题仅显示汉堡菜单图标。

看起来汉堡菜单图标也不见了，那是因为你没有添加它。

使用此代码添加它：

  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
&#9776;

祝你好运。

在Bootstrap 4中使用切换器时，可折叠导航栏项目消失

1 个答案: