Bootstrap 4响应式导航栏垂直

Question

我正在使用Bootstrap 4并在我的页面上导航水平项目。在小型设备上，此菜单折叠，菜单项仍处于水平线。我应该怎么做才能将它改为垂直，所以每行的项目是一个？

Answer 1

对于Bootstrap 4，断点已更改。如果您希望它在小屏幕上垂直，您应该像这样覆盖导航栏CSS：

Unable to execute command [args=[], executable = mv null null timeout=..., outFile=null. workingDir=null, useStdeirOnEmptyStdout=false] 

演示 http://codeply.com/go/Ar1H2G4JVH

注意：对于导航栏中使用的@media(max-width: 544px) { .navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem; } .navbar .navbar-nav { float:none !important; } .navbar .collapse.in, .navbar .collapsing { clear:both; } } 类，应相应调整@media查询最大宽度。

• navbar-toggleable-xs - 544px
• navbar-toggleable-sm - 767px
• navbar-toggleable-md - 991px

更新：自Bootbarrap 4 Alpha 6起，额外的CSS 不再需要，因为导航栏将垂直堆叠：http://www.codeply.com/go/cCZz5CsMcD

Answer 2

我检查了互联网上可用的许多解决方案，但没有一个可以完美运行。最后经过大量搜索，我发现打击示例完美运行。它额外的只是几行 Jquery 和 css 代码。

https://www.jqueryscript.net/demo/bootstrap-side-navbar/#five