html - Bootstrap 4 : Don’t want dropdown items inside the navbar container

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