是否可以使用引导程序在某个设备上显示一个特殊的导航栏，而在较小的设备上显示另一个导航栏？

Question

希望你一切都好。 我会又快又准。现在，我已经制作了一个自定义导航栏（图片如下）。但是，当然，当屏幕太小而无法显示此导航栏并在顶部显示正常导航栏时，需要停用此导航栏。是否可以使用引导程序来做到这一点？

我的实际自定义导航栏的图片（左侧）：

真诚的

Answer 1

您正在寻找响应式布局：https://getbootstrap.com/docs/4.0/layout/overview/

在您的情况下，这可能会在特定宽度（大型设备）上显示此侧边栏并将其隐藏在其他宽度上，例如：

<div class='yourLargeNavbar'> ... </div>

<div class='yourSmallNavbar'> ... </div>

然后，使用 CSS：

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { 
    .yourLargeNavbar{
      display:none;
    }
    .yourSmallNavbar{
      display:block;
    }
}

@media (min-width: 767.98px) { 
        .yourLargeNavbar{
          display:block;
        }
        .yourSmallNavbar{
          display:none;
        }
    }

这样，当屏幕尺寸小于767px时，小导航栏会出现，大导航栏会消失，反之亦然。

有很多例子，Bootstrap 有自己的 navbar 组件，它以响应方式工作：https://getbootstrap.com/docs/4.0/components/navbar/

编辑：现在检查代码：

<div class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </div>

您应该将类​​：nav-toggler 更改为 navbar-toggle 并删除某些数据参数中的“bs”并将按钮更改为 div。将这段代码替换为我发布的代码，它应该可以工作。

这里：https://codepen.io/jpaulet/pen/xxEprGB