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

问题描述 投票:0回答:4

这个问题已经在这里有一个答案:

我使用的引导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

如何使右对齐下拉菜单来打开左边菜单吗?

html twitter-bootstrap bootstrap-4
4个回答
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>


1
投票

目前,引导的_dropdown.scss被设置left: 0px.dropdown-menu

如果添加以下你的CSS,就应该重写此。

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

也许增加一个独特的类和目标是让你不破坏任何东西。


1
投票

根据Dropdown menu causes scrollbar

添加下拉菜单,到您的下拉菜单应该做的伎俩

© www.soinside.com 2019 - 2024. All rights reserved.