Question

我正在将Bootstrap 4用于一个非常简单的导航栏，我只是注意到我的右对齐下拉列表在右侧打开...这会产生溢出（即，显示Web浏览器的水平滚动条）。

这是导航栏的代码：

<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">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div id="navbarNavDropdown" class="navbar-collapse collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Recipes</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Shopping List</a>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown">
                  Manage
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Save Data</a>
                    <a class="dropdown-item" href="#">Fetch Data</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

以及相关的密码笔：https://codepen.io/ehouarn-perret/pen/MLoGdE

如何使该右对齐的下拉菜单打开左侧的菜单？

Answer 1

尝试：

<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">
    <span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <a class="nav-link" href="#">Recipes</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Shopping List</a>
        </li>
    </ul>
    <ul class="navbar-nav dropleft">
        <li class="dropdown">
            <a class="nav-link dropdown-toggle " href="#" id="navbarDropdownMenuLink" data-toggle="dropdown">
              Manage
            </a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Save Data</a>
                <a class="dropdown-item" href="#">Fetch Data</a>
            </div>
        </li>
    </ul>
</div>

Answer 2

目前，Bootstrap的_dropdown.scss会将left: 0px设置为.dropdown-menu。

如果将以下内容添加到CSS中，它应该覆盖此内容。

.dropdown-menu { 
  right: 0px;
  left: auto;
}

也许添加一个唯一的类和目标，以便您不会破坏其他任何东西。

Answer 3

将dropdown-menu-right添加到您的dropdown-menu类中，如下所示：

   <div class="dropdown-menu dropdown-menu-right">
       <a class="dropdown-item" href="#">Save Data</a>
       <a class="dropdown-item" href="#">Fetch Data</a>
   </div>

这会将您的下拉菜单向右对齐，而不是默认值向左对齐。

Answer 4

根据Dropdown menu causes scrollbar

将dropdown-menu-right添加到您的dropdown-menu应该可以解决问题

Bootstrap 4导航栏：向右打开的下拉菜单在右侧：溢出

4 个答案: