Bootstrap 4 响应式导航栏垂直

Posted 2023-04-13

【中文标题】Bootstrap 4 响应式导航栏垂直

【英文标题】：Bootstrap 4 responsive navbar vertical

【发布时间】：2016-07-19 15:57:43

【问题描述】：

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

【问题讨论】：

请注意，Bootstrap 4 不稳定，因为它仍处于测试阶段

谢谢你提醒我。我知道我不应该在生产中使用它，但现在我只在一个学生项目中使用它，该项目不会（至少在开始时）在生产中，还有很多事情要做。

如果您发布您自己尝试过的代码（当然不是您的整个项目）或认为代码中的错误在哪里，这对其他人会有所帮助，这也将帮助您获得答案和建议。 :)

jsfiddle.net/763tcf9r

【参考方案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

注意：@media 查询最大宽度应针对导航栏中使用的navbar-toggleable-* 类进行相应调整。

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

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

【参考方案2】：

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

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