Question

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

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

我不喜欢的是，当导航器折叠时，单击语言选择器会按下拉列表的高度展开导航栏。显然，它必须将语言选择器包含在协作的＆＃34; nav＆＃34; - 但我更倾向于它与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 link - 虽然由于某种原因，我没有使用我在资源中添加的bootstrap.css文件。所以菜单是白色的，而不是黑色:)。您必须更改显示html的窗口的宽度，才能看到菜单展开和折叠。

Answer 1

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

简单方法：

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>

防止折叠的bootstrap4导航栏中的下拉列表展开导航栏

1 个答案: