时间戳

首页 > 解决方案 > 防止折叠的 bootstrap4 导航栏中的下拉列表扩展导航栏

css - 防止折叠的 bootstrap4 导航栏中的下拉列表扩展导航栏

问题描述

我需要一个不会在引导 v4 导航栏中与菜单的其余部分一起折叠的选择器。也有一些工作。见下文。

这有点 hacky，因为实际上有两个语言选择器，但是当浏览器窗口小于引导程序中的 lg 断点时，一个是隐藏的。如果它明显大于 lg 断点，则相反。它工作正常 - 但可能有一种更优雅的方式来做到这一点。

我不喜欢的是，当导航折叠时，单击语言选择器会将导航栏扩展为下拉列表的高度。显然它必须作为语言选择器被包裹在协作的“导航”中 - 但我更希望它的行为与 lg 和更宽的选择器一样 - 下拉菜单超出导航栏而不改变大小导航栏。

有没有办法解决？

看这些图片：

扩展菜单中的语言选择器

折叠菜单中的语言选择器

语言选择器下拉列表展开折叠菜单

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!--navigation-->
<nav class="navbar sticky-top navbar-dark navbar-expand-lg">
  <a class="navbar-brand" href="#">Page Title</a>
  <!--language selector for collapsed menu [hidden when viewport larger than medium]-->
  <div class="d-lg-none ml-auto">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">&#127760; Language</a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Language 1</a>
          <a class="dropdown-item" href="#">Language 2</a>
          <a class="dropdown-item" href="#">Language 3</a>
        </div>
      </li>
    </ul>
  </div>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbar">
    <div class="navbar-nav">
      <!-- page user is looking at = "nav-link active"-->
      <a class="nav-item nav-link active" href="#">Home<span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Link 1</a>
      <a class="nav-item nav-link" href="#">Link 2</a>
      <div class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">The Team</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Link</a>
          <a class="dropdown-item" href="#">Another Link</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">An entirely different link</a>
        </div>
      </div>
      <a class="nav-item nav-link" href="sponsor_us.php">Link 3</a>
      <a class="nav-item nav-link disabled" href="#">inactive Link</a>
    </div>
  </div>
  <!--language selector for expanded menu [hidden viewport size medium and down]-->
  <div class="d-none d-sm-none d-md-none d-lg-block d-xl-block ml-auto">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">&#127760; Language</a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Language 1</a>
          <a class="dropdown-item" href="#">Language 2</a>
          <a class="dropdown-item" href="#">Language 3</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

编辑：这是一个jsfiddle 链接——尽管出于某种原因，我没有使用我在资源中添加的 bootstrap.css 文件。所以菜单是白色的，不是黑色的:)。您必须更改显示 html 的窗口的宽度才能看到菜单展开和折叠。

标签： csstwitter-bootstrapnavbarresponsive

解决方案

我知道这很旧，但这是我发现这个问题的唯一地方。

简单的方法：

CSS：.popout { position: absolute !important;}

现在向您的 div 添加弹出类，当导航栏折叠时您不再希望留在导航栏内！

<style>
    .popout { position: absolute !important;}
</style>
<html>
    ...
    <div class="dropdown-menu dropdown-menu-right popout" ...>
        <a class="dropdown-item" href="#">Language 1</a>
        <a class="dropdown-item" href="#">Language 2</a>
        <a class="dropdown-item" href="#">Language 3</a>   
    </div>
</html>

推荐阅读