主页 / 问题 / 796393
Accepted
Uranus
Asked:2020-03-11 14:24:13 +0000 UTC2020-03-11 14:24:13 +0000 UTC

如何使下拉菜单不超出浏览器的右边缘

  • 772

我正在使用 Bootstrap 4 制作导航菜单。需要将一些nav-item 元素放置在navbar 的右边缘，而其中最右边有一个下拉菜单。

问题是下拉菜单的宽度明显大于导航项的宽度，并且不知何故不依赖于菜单列表中文本的宽度。因此，列表在打开时会超出浏览器的边缘。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<nav class="navbar navbar-expand-md bg-light navbar-light fixed-top">
  <!-- Brand -->
  <a class="navbar-brand" href="/">App Name</a>
    <!-- Left Side Of Navbar -->
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="/home">Home</a>
      </li>
    </ul>

    <!-- Right Side Of Navbar -->
    <ul class="navbar-nav ml-auto">
      <!-- Authentication Links -->
      <li class="nav-item dropdown">
        <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">User Name <span class="caret"></span></a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="/logout">Logout</a>
        </div>
      </li>
    </ul>
</nav>

要重现上述代码段中的问题，您需要执行它，然后单击“整页”按钮。它在小屏幕上的工作方式不同，并且此特定问题仅在桌面上重现。

我试图将它移出<div class="dropdown-menu">parent <li>，希望列表会从浏览器的右边缘被击退。但在这种情况下，列表根本不会打开。

可在 Chrome 和 Safari 中播放。

Chrome：版本 64.0.3282.186（官方构建）

Safari：版本 10.1.2 (12603.3.8)

bootstrap

2 个回答

  1. Best Answer

    Bootstrap 4 中的元素.dropdown-menu使用绝对定位对齐到其容器的左侧：left: 0。要覆盖此对齐方式，您需要在下拉列表中添加另一个类，使其右对齐，但仅适用于中等屏幕（平板电脑）和更宽的屏幕：

    @media (min-width: 768px) {
  .dropdown-menu-right {
    right: 0;
    left: auto;
  }
}

    此外，仔细阅读文档后发现，框架本身中已经存在这样的类。信息位于菜单对齐部分：

    默认情况下，下拉菜单会自动 100% 定位在其父级的顶部和左侧。将 .dropdown-menu-right 添加到 .dropdown-menu 以右对齐下拉菜单。

    所以解决方案是在带有 class.dropdown-menu-right的元素上添加一个类.dropdown-menu。

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<nav class="navbar navbar-expand-md bg-light navbar-light fixed-top">
  <!-- Brand -->
  <a class="navbar-brand" href="/">App Name</a>
    <!-- Left Side Of Navbar -->
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="/home">Home</a>
      </li>
    </ul>

    <!-- Right Side Of Navbar -->
    <ul class="navbar-nav ml-auto">
      <!-- Authentication Links -->
      <li class="nav-item dropdown">
        <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">User Name <span class="caret"></span></a>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="/logout">Logout</a>
        </div>
      </li>
    </ul>
</nav>

    • 3

  2. 你需要改变风格

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style> 
.dropdown-menu{
  margin-left:-40px;
  background:blue;
}
</style>


<nav class="navbar navbar-expand-md bg-light navbar-light fixed-top">
  <!-- Brand -->
  <a class="navbar-brand" href="/">App Name</a>
    <!-- Left Side Of Navbar -->
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="/home">Home</a>
      </li>
    </ul>

    <!-- Right Side Of Navbar -->
    <ul class="navbar-nav ml-auto">
      <!-- Authentication Links -->
      <li class="nav-item dropdown">
        <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">User Name <span class="caret"></span></a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="/logout">Logout</a>
        </div>
      </li>
    </ul>
</nav>

    然后使用媒体查询将其修复为其他屏幕分辨率

    • 0

相关问题