Question

我目前正在使用Bootstrap v3.3.6和jQuery v1.9.1。我有一个应用程序，一旦达到某个屏幕分辨率将折叠水平导航栏。我喜欢这个功能如何工作，并希望保持当前的屏幕分辨率断点。我想要做的是当导航栏达到一定宽度时折叠导航栏。该应用程序允许不同的用户具有不同的角色，这些角色可以根据用户的角色在导航栏中添加或删除项目。

有没有办法通过CSS根据导航栏的宽度折叠导航栏？ javascript是唯一的选择吗？

Answer 1

没有JavaScript，似乎不可能。目前还不清楚你想要实现的目标，但你必须在CSS中使用媒体查询来根据屏幕宽度触发事件，而不是单个元素宽度。

这篇文章：Can media queries resize based on a div element instead of the screen?涵盖了相关主题。

我建议您使用em或vw查看设置宽度。后者将使用视口动态调整大小。然后，您可以使用媒体查询切换显示。

请参阅：http://www.w3schools.com/css/css_rwd_mediaqueries.asp

请参阅：https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

使用视口宽度/高度度量非常适合调整字体大小，但也可能允许您的菜单宽度随着浏览器的大小调整而“流动”，然后添加媒体查询断点以切换显示或在达到最小值后设置固定值或者最大。

如果您只想在屏幕获得一定宽度时隐藏水平菜单栏（例如顶部导航栏），则可以使用浏览器开发人员工具或Bootstrap文档来识别元素的类名，然后添加其他内容CSS到hide元素。

以下是我在工作中对响应式应用所做的事情的示例：

div.top-nav {
  /* some attributes here */
}

div.bottom-nav.menu {
  visibility: hidden;
}

@media only screen and (min-width: 730px) {
  /* perhaps set fixed max values after screen gets beyond tablet so fonts do not get too big if resizable in huge resolution monitors */
}

@media only screen and (max-width: 991px) {
  /* some fixes at some desired width as screen resizes */
}

@media only screen and (max-width: 730px) {
  /* hide or change element properties for tablets */
}

@media only screen and (max-width: 500px) {
  /* hide or change element properties for phones */

  .top-nav-item {
    display: none !important; /* hidden on phone and display bottom nav items instead below */
  }
  .logo {
    max-height: 25px !important;
  }
  .avatar {
    max-height: 20px !important;
    max-width: 20px !important;
  }
  div.bottom-nav.menu {
    visibility: visible;
  }
  div.item.bottom-nav {
    font-size: 4vw;
  }
}

在CSS中，导航栏可以按导航栏的宽度折叠吗？

1 个答案: