Bootstrap 4 个响应式垂直导航栏

Question

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

Answer 1

对于Bootstrap4，断点发生了变化。如果您希望它在小屏幕上是垂直的，您应该像这样覆盖导航栏 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-* class 进行相应调整。

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

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

Answer 2

我检查了互联网上可用的许多解决方案，但没有一个能完美运行。经过大量搜索，我终于找到了 blow example 完美运行。它所拥有的只是几行 Jquery 和 css 代码。

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

Bootstrap 4 个响应式垂直导航栏

Bootstrap 4 responsive navbar vertical

navigation

menu

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4