Bootstrap 4 Navbar：右对齐下拉菜单在右侧打开：溢出[重复]

Posted 2023-03-06

【中文标题】Bootstrap 4 Navbar：右对齐下拉菜单在右侧打开：溢出[重复]

【英文标题】：Bootstrap 4 Navbar: right-aligned dropdown menu opens on the right: overflow [duplicate]

【发布时间】：2019-06-28 02:26:01

【问题描述】：

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

这是导航栏的代码：

<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>

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

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

【参考方案1】：

将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>

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

【讨论】：

谢谢，这正是我想要的！

酷，很高兴能帮上忙！

【参考方案2】：

试试这个：

<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>

【参考方案3】：

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

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

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

也许添加一个独特的类和目标，这样你就不会破坏其他任何东西。

【参考方案4】：

根据Dropdown menu causes scrollbar

将下拉菜单右侧添加到您的下拉菜单应该可以解决问题

【讨论】：

谢谢，以前没见过。