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:
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
注意:@media 查询 max-width 应针对导航栏中使用的 navbar-toggleable-*
类进行相应调整.
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
更新:从 Bootstrap 4 Alpha 6 开始,不再需要额外的 CSS,因为导航栏将垂直堆叠:http://www.codeply.com/go/cCZz5CsMcD
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屋!