Bootstrap 4导航栏，带下拉列表和响应式模板？

Question

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

是否有使用Bootstrap 4执行此操作的示例或模板？我已经发现响应示例折叠菜单，并显示3条按钮，但菜单不会成为手风琴菜单。 BS4还有许多下拉示例，但在响应时没有。

当屏幕变小时，我是否只需要隐藏整个导航栏并显示具有所有相同选项的手风琴？这看起来比BS3要多得多。

Answer 1

我的解决方案是简单地向您的自定义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。不是很复杂，但它应该说明一点。