Bootstrap 4响应式垂直导航条

Question

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

Answer 1

对于Bootstrap 4，断点已经更改。如果你想在小屏幕上垂直显示，你应该像这样覆盖导航栏CSS：

@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;
    }
}

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

注意：对于导航栏中使用的navbar-toggleable-*类，@media query最大宽度应相应调整。

• 导航栏可切换xs-544px
• 导航栏可切换sm-767px
• 导航栏可切换md-991px

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

Answer 2

我在互联网上查看了许多可用的解决方案，但没有一个能完美工作。最后，经过大量的搜索，我发现blow-example工作得很完美。它只剩下几行Jquery和css代码。

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