twitter-bootstrap - 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;
  }
}

这是CodePen 上的一个简单示例。不是很复杂，但它应该说明这一点。