【问题标题】:"Mashable" style navbar“混搭”风格的导航栏
【发布时间】:2019-02-07 20:08:38
【问题描述】:

我知道这不是我的“个人帮助台”,但我正在寻找一种简单的解决方案来实现导航栏,其中导航栏项目消失并最终变成下拉菜单(或左侧导航栏),因为浏览器像 @ 一样水平调整大小987654321@.

我目前正在使用基于 Bootstrap 3 构建的http://www.bublinastudio.com/flattybs3/。我一直在寻找几个小时,但我只能找到“如何在导航栏中放置下拉菜单”。没有人解释如何根据浏览器宽度显示/隐藏导航栏项目,以及如何确定项目的优先级,指出哪些应该首先消失。

如果你们中的任何人可以将我重定向到一些有用的网站,我将不胜感激!

【问题讨论】:

  • 搜索响应式html或者导航的响应式html,你会得到很多教程
  • Bootstrap 文档实际上很好地涵盖了这一点 - 有关详细信息,请参阅 getbootstrap.com/components/#navbar-default
  • 谢谢 Matthew,除了引导文档之外,我到处寻找。

标签: html css twitter-bootstrap


【解决方案1】:

Bootstrap 4(2019 年更新)

这是 Bootstrap 4.1 的更新选项。这会将溢出的额外导航栏项目折叠到右侧下拉列表中。它逐渐将导航栏项目移动到下拉列表中。

https://www.codeply.com/go/IETSah3bFG

Bootstrap 3(原答案)

如果我理解您的问题,您希望导航栏链接在宽度不足时折叠到右侧的“更多”下拉菜单。这需要自定义 CSS,以及一些 jQuery 来监控导航栏的宽度并相应地折叠溢出的链接......

这是一个工作示例:http://bootply.com/128897

【讨论】:

    【解决方案2】:

    您可以查找有关媒体查询和 :nth-child() 选择器的信息。应该可以帮助您完成您希望做的事情!

    nth-child()
    http://css-tricks.com/how-nth-child-works/

    http://api.jquery.com/nth-child-selector/

    媒体查询
    http://css-tricks.com/css-media-queries/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2016-02-15
      • 2013-09-27
      • 1970-01-01
      • 1970-01-01
      • 2018-12-11
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多