我正在使用 Bootstrap 4 并在我的页面上使用水平项目进行导航。在小型设备上,此菜单折叠并且菜单项仍处于水平线中。我应该怎么做才能将其更改为垂直以便每行一个项目?
问问题
10030 次
2 回答
0
对于 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-*
导航栏中使用的类进行相应调整。
- 导航栏-toggleable-xs - 544px
- 导航栏-toggleable-sm - 767px
- 导航栏-toggleable-md - 991px
更新:自 Bootstrap 4 Alpha 6 起不再需要额外的 CSS ,因为导航栏将垂直堆叠:http: //www.codeply.com/go/cCZz5CsMcD
于 2016-03-31T11:41:51.627 回答
0
我检查了互联网上可用的许多解决方案,但没有一个可以完美运行。最后经过大量搜索,我发现打击示例运行良好。它所拥有的只是几行 Jquery 和 css 代码。
https://www.jqueryscript.net/demo/bootstrap-side-navbar/#five
于 2021-02-20T12:48:31.090 回答