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

Question

我目前使用的是 Bootstrap v3.3.6 和 jQuery v1.9.1。我有一个应用程序，一旦达到特定的屏幕分辨率，它就会折叠水平导航栏。我喜欢此功能的工作方式，并希望保持当前的屏幕分辨率断点。当导航栏达到一定宽度时，我想做的也是折叠导航栏。该应用程序允许不同的用户拥有不同的 Angular 色，这些 Angular 色可以根据用户的 Angular 色在导航栏中添加或删除元素。

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

Answer 1

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

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

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

参见:http://www.w3schools.com/css/css_rwd_mediaqueries.asp

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

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

---

如果您只是想在屏幕达到一定宽度时隐藏水平菜单栏(例如顶部导航栏)，您可以使用浏览器开发工具或 Bootstrap 文档来识别元素的类名，然后添加额外的用于隐藏元素的 CSS。

这是我正在开发的响应式应用程序的示例:

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;
  }
}