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

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

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

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