Question

当我折叠屏幕时，我不希望下拉菜单位于导航栏中。在下拉菜单中，我将其定位为绝对值。唯一的问题是，下拉列表中的某些项目被删减了，我不希望滚动条出现在其中。我尝试使用媒体查询来手动移动它，但是它的位置没有改变。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark py-0 ">
    <a class="navbar-brand py-0" href="#">Navbar</a>

    <ul class="ml-auto navbar-nav ml-auto">

        <li class=" mt-auto mb-auto nav-item active py-0 d-none d-xl-block d-lg-block ">
            <a class="nav-link " href="#">Hi, username <span class="sr-only">(current)</span></a>
        </li>

        <li class="mt-auto mb-auto nav-item dropdown py-0">
            <a class="nav-link dropdown-toggle py-0" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                <button class="btn btn-primary btn-sm" type="submit"><img src="images/space_stars_blue_free_wallpaper.jpg"
                        class="img-fluid rounded-circle " alt="..." width="45" height="45"></button>
            </a>

            <div id="test1" class="dropdown-menu dropdown-menu-right position-absolute" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>

                </div>


        </li>

    </ul>

</nav>

https://jsfiddle.net/fby71cm2/

Answer 1

我没有看到滚动条问题。也许是因为我们无权访问images/space_stars_blue_free_wallpaper.jpg。

您可以通过添加以下CSS将菜单向左移动：

#test1 {
  left:auto;
  right: 0;
}

引导程序4：不要在导航栏容器中放入下拉菜单项

1 个答案: