gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 17:40:54 27 4
gpt4 key购买 nike

我正在使用 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

注意:@media 查询最大宽度应针对 navbar-toggleable-* 进行相应调整。导航栏中使用的类。
  • 导航栏-toggleable-xs - 544px
  • 导航栏-toggleable-sm - 767px
  • 导航栏-toggleable-md - 991px

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

    关于twitter-bootstrap - Bootstrap 4 响应式导航栏垂直,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36329305/

    27 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com