Bootstrap 4导航栏，带下拉菜单和响应模板？

Question

对于B3，有大量带有下拉菜单的顶级导航栏的模板。随着屏幕尺寸变小，菜单折叠为3栏按钮，菜单变成折叠菜单。

有没有使用Bootstrap 4做这件事的例子或模板？我找到的响应示例可以折叠菜单，并显示3栏按钮，但菜单不会变成手风琴菜单。也有许多BS4的下拉示例，但不是响应式的。

当屏幕变小时，我是否必须隐藏整个导航栏，并显示具有所有相同选项的手风琴？这似乎比BS3要多得多的工作。

Answer 1

我的解决方案是，简单地将媒体查询添加到您的自定义CSS中，该CSS以导航折叠的屏幕尺寸为目标，然后以您喜欢的任何方式设置元素的样式：

@media (max-width: 544px) {
  .navbar-brand {
    display:none;
  }
  .navbar-nav .nav-item {
    float:none;
  }
  .navbar-nav .nav-item + .nav-item{
    margin-left:0;
  }
}

这是一个simple example on CodePen。不是很复杂，但它应该说明这一点。