twitter-bootstrap – Bootstrap 4响应式导航栏垂直

发布时间：2020-12-17 20:41:49 所属栏目：安全来源：网络整理

导读：我正在使用Bootstrap 4并在我的页面上导航水平项目.在小型设备上,此菜单折叠,菜单项仍处于水平线.我应该怎么做才能将其更改为垂直,因此每行的项目是一个？解决方法对于Bootstrap 4,断点已更改.如果您希望它在小屏幕上垂直,您应该像这样覆盖导航栏CSS： @me

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

解决方法

对于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查询最大宽度.

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!