Bootstrap 4响应式导航栏垂直 [英] Bootstrap 4 responsive navbar vertical

问题描述

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

I am using Bootstrap 4 and have navigation with horizontal items on my page. On small devices this menu collapses and menu items are still in horizontal line. What should I do to change it to vertical so items are one per each line?

推荐答案

对于Bootstrap 4，断点已更改.如果您希望导航栏CSS在小屏幕上垂直放置，则应覆盖这样的导航栏CSS:

For Bootstrap 4, the breakpoints have changed. You should override the navbar CSS like this if you want it to be vertical on small screens:

@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查询的最大宽度.

Note: The @media query max-width should be adjusted accordingly for the navbar-toggleable-* class used in the navbar.

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

更新:自引导4 Alpha 6起，不再需要额外的CSS ，因为导航栏将垂直堆叠:

UPDATE: The extra CSS is no longer needed as of Bootstrap 4 Alpha 6 since the navbar will stack vertically: http://www.codeply.com/go/cCZz5CsMcD

这篇关于Bootstrap 4响应式导航栏垂直的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！