Bootstrap 4 灵活的响应式导航栏菜单 [英] Bootstrap 4 flexible responsive navbar menu

问题描述

请注意，我不是在问如何对齐导航菜单中的项目(左或右)，而是如何将项目从导航栏动态移动到下拉菜单.

我在我的项目中使用 Bootstrap 4.1.我的顶部主菜单包含许多链接.最后一项是包含附加链接的下拉列表:

I'm using Bootstrap 4.1 in my project. My top main menu contains many links. The last item is a dropdown which contains additional links:

我希望在调整窗口大小时，将标题中没有足够空间的正确项目移动到下拉项目中.

I want, when resizing the window, the right items for which doesn't have enough space in the header, to be moved into the dropdown item.

我想要的:

但是在调整大小时，项目正在缩小.然后，对于md"(和较小的)断点，默认导航栏功能被激活:

But when resizing, the items are shrinking. Then, for "md" (and smaller) breakpoints, the default navbar functionality is activated:

使用 flexbox 的解决方案也是可以接受的.链接到带有默认 Bootstrap 导航栏的简单演示:CodePen

Solutions with flexbox are acceptable, too. Link to simple demo with default Bootstrap navbar: CodePen

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Menu item 4</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Menu item 5</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Menu item 6</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Menu item 7</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Menu item 8</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown Menu
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Menu item 9</a>
          <a class="dropdown-item" href="#">Menu item 10</a>
          <a class="dropdown-item" href="#">About</a>
          <a class="dropdown-item" href="#">Help</a>
          <a class="dropdown-item" href="#">Sign out</a> 
        </div>
      </li>
    </ul>
  </div>
</nav>

</nav>

谢谢！

这是我目前正在处理的窗口调整大小功能:

Link above has been updated, too.

It works when making the screen smaller, but I need to implement:

上面的链接也已更新.

它在缩小屏幕时有效，但我需要实现:

解决方案

• 增加屏幕宽度时；
• 在md"(或更小)断点中，使用默认引导程序的功能

推荐答案

改为使用高度来检测导航栏项目何时换行.您可能需要调整 JS 以适应其他菜单项(关于、帮助、注销).这是 Bootstrap 4 的 jQuery 函数...

Demo: https://www.codeply.com/go/wKWHgsMXah

Related: Bootstrap navbar hide menu elements when resizing

这篇关于Bootstrap 4 灵活的响应式导航栏菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！