这个问题已经在这里有一个答案:
我使用的引导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>
和相关codepen:https://codepen.io/ehouarn-perret/pen/MLoGdE
如何使右对齐下拉菜单来打开左边菜单吗?
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>
这将调整您的下拉菜单中的权利,而不是默认的是左边。
尝试这个 :
<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>
目前,引导的_dropdown.scss
被设置left: 0px
到.dropdown-menu
。
如果添加以下你的CSS,就应该重写此。
.dropdown-menu {
right: 0px;
left: auto;
}
也许增加一个独特的类和目标是让你不破坏任何东西。
根据Dropdown menu causes scrollbar
添加下拉菜单,到您的下拉菜单应该做的伎俩