2016-04-25 95 views
1

对于B3,顶级导航栏有大量模板,并带有下拉菜单。随着屏幕尺寸变小,菜单折叠成3条按钮,菜单变成手风琴菜单。Bootstrap 4 navbar,带有下拉菜单和响应模板?

是否有任何示例或模板使用Bootstrap 4执行此操作?我已经找到的响应例子已经找到折叠菜单,并显示3条按钮,但菜单不成为手风琴菜单。 BS4也有很多下拉式的例子,但不是响应式的。

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

+0

关于导航栏下拉菜单和对齐的导航栏项目,还请阅读[Bootstrap 4的响应式导航栏](http://bassjobsen.weblogs.fm/bootstrap-4s-responsive-navbars/)[ ]。有关导航栏下拉菜单的示例,另请参阅https://github.com/bassjobsen/responsive-navbar-dropdowns。 –

回答

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 。不是很复杂,但它应该说明这一点。