代码之家 › 专栏 › 技术社区 › Natalie Perret

引导4导航栏:右对齐下拉菜单在右侧打开:溢出[重复]

bootstrap-4 twitter-bootstrap html

Natalie Perret · 技术社区 · 5 年前

我正在使用Bootstrap4作为一个非常简单的导航栏,我刚刚注意到我的右对齐下拉菜单打开了。。。在右侧,这会产生溢出(即,显示webbrowser的水平滚动条)。

<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

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

4 回复 | 直到 5 年前

Corné 5 年前

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

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

Houssem 5 年前

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

Sam Johnson 5 年前

目前, _dropdown.scss left: 0px 到 .dropdown-menu .

如果您将以下内容添加到CSS中,它将覆盖此内容。

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

Bacon 5 年前

根据 Dropdown menu causes scrollbar

将下拉菜单添加到您的下拉菜单应该可以做到这一点