Question

我的顶部菜单和子菜单在正常屏幕上看起来不错。当缩小到较小的尺寸时，我希望菜单/子菜单通过引导程序像正常下拉菜单一样垂直对齐。这不会发生，如下所示。如何在小屏幕上显示垂直对齐的下拉列表（菜单和子菜单）？

TIA

截图

代码

 <nav class="navbar navbar-expand-md navbar-dark ">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menubar">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse" id="menubar">
                    <ul class="nav navbar-nav">
                        <li class="nav-item ">
                            <a class="nav-link" href="#">Menu1</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link" data-toggle="dropdown" href="#">Menu2</a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Submenu1</a></li>
                                <li><a href="#">Submenu2</a></li>
                                
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link" data-toggle="dropdown" href="#">Menu3</a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Submenu3</a></li>
                                <li><a href="#">Submenu4</a></li>
                              
                            </ul>
                        </li>
                        
                    </ul>
                </div>
            </nav>

 @media (max-width: 767px) {
    .navbar-collapse {
        background-color: #565149;
    }
    .banner-navbar,
    .banner-search {
        display: none;
    }
}
#menubar ul {
    height: 44px;
    padding-top: 5px;
}
#menubar .nav-link {
    font-size: 14px;
    padding: 8px 50px 0 0 !important;
    color: white !important;
}
    #menubar .nav-link:focus,
    #menubar .nav-link:hover,
    #menubar .nav-link:visited {
        color: white !important;
    }
    #menubar .navbar{
        padding-left: 0 !important;
    }
.navbar.navbar-dark {
    height: 44px; 
    margin: 0 15%;
}

nav.navbar .navbar-nav li.nav-item.active:after{
    content: "";
    position: relative;
    margin-left: -31px;
    left: 50%;
    bottom: 15px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
}
/*submenu*/
#menubar li.dropdown.show {
    position: static;
}
    #menubar li.dropdown.show .dropdown-menu {
        display: table;
        width: 100%;
        text-align: center;
        left: 0;
        right: 0;
        margin: 0;
    }

.dropdown-menu > li {
    display: table-cell;
    padding-top: 6px;
}
.dropdown-menu > li a{
    font-weight:600;
}
    .dropdown-menu > li a:hover {
        text-decoration: none;
    }

更新：从 Rich 的解决方案稍作修改。对我来说有两个问题：

不知何故，搜索框和右边的小导航栏离屏幕中间太近了。应该向右浮动。
搜索关键字的输入应该加倍其宽度（或多或少），但我不想给它一个固定的像素。我怎样才能做到这一点？谢谢

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .open > ul {
        display: inline-flex !important;
    }

    .bg-banner {
        background-image: linear-gradient(#17517f, #46769d);
    }

    .bg-headbar {
        background-color: #005db9;
    }

    #menubar .nav-link {
        font-size: 14px;
        padding-right: 50px;
        color: white;
    }

    nav.navbar .navbar-nav li.nav-item.active:after {
        content: "";
        position: relative;
        margin-left: -31px;
        left: 50%;
        bottom: 15px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid white;
    }
   #menubar li.dropdown.show {
        position: static;
    }
    #menubar li.dropdown.show .dropdown-menu {
            display: table;
            width: 100%;
            text-align: center;
            left: 0;
            right: 0;
            margin: 0;
        }

    .dropdown-menu > li {
        display: table-cell;
        padding-top: 6px;
    }

        .dropdown-menu > li a {
            font-weight: 600;
        }

            .dropdown-menu > li a:hover {
                text-decoration: none;
            }
</style>
<nav class="navbar navbar-expand-md navbar-dark text-white bg-banner">
    <a class="navbar-brand" href="#">Test Site</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse navbarSupportedContent">
        <form class="form-inline my-2 .m-md-0 ml-auto">
            <div class="input-group">
                <input type="text" class="form-control form-control-sm" placeholder="Seach">
                <div class="input-group-append">
                    <button class="btn btn-outline-light btn-sm" type="button"><i class="fa fa-search"></i></button>
                </div>
            </div>
        </form>
    </div>

    <div class="banner-navbar collapse navbar-collapse navbarSupportedContent">
        <nav class="navbar navbar-expand-sm navbar-light">
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link" data-toggle="dropdown" role="button" href="#">
                        <i class="fa fa-user"></i>
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Sign Out</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link pl-2"><i class="fa fa-cog"></i></a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link" data-toggle="dropdown" role="button" href="#">
                        <i class="fa fa-question-circle"></i>
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#"> Help</a>

                    </div>
                </li>
            </ul>
        </nav>
    </div>

</nav>
<nav class="navbar navbar-expand-md navbar-dark text-white bg-headbar py-0 py-8-md">
    <div class="collapse navbar-collapse navbarSupportedContent" id="menubar">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Menu1
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Home<span class="sr-only"> (current)</span></a>
                    <a class="dropdown-item" href="#">Submenu 1B</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Menu2
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Submenu 2A</a>
                    <a class="dropdown-item" href="#">Submenu 2B</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Menu3
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Submenu 3A</a>
                    <a class="dropdown-item" href="#">Submenu 3B</a>
                </div>
            </li>
        </ul>
    </div>
</nav>
<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, blanditiis eaque? Vero consequuntur tempora vitae at maxime, repellendus excepturi quia quibusdam odit sed ullam praesentium natus rerum molestiae cupiditate possimus?
</p>
<script type="text/javascript">
    $("#menubar li.dropdown").hover(function () {
        $(this).addClass("active show");
    },
        function () {
            $(this).removeClass("active show");
        });
    $("#menubar ul.dropdown-menu>li>a").on("click", function (e) {
        $("#menubar li.dropdown").removeClass("active show");
    });
</script>

Answer 1

您不必做任何事情，因为对于小屏幕，navbar-nav ul 通常设置为 flex-direction: column，并且在导航栏中设置的断点处切换到 flex-direction: row（{{1 }}).

您没有通过 Stackoverflow 代码段工具提供代码的工作版本，而且我无法轻松让您的代码在本地运行，因此不清楚为什么您的代码没有按照您的意愿运行。

>

我确实整理了您的代码的替代版本，可能会对您有所帮助。我不确定您在想如何通过 .navbar-expand-md .navbar-nav 类向用户指示他们的位置，但这应该很容易添加。

更新

我已经修改了我的答案，包括您使用 JavaScript 添加 active 以显示下拉菜单，并将小菜单向右移动。

我修复了原始版本中 ARIA 标签的问题。我复制了代码，但忽略了给 ARIA 标签一个唯一的 ID。

更新 2

为了防止每次用户将鼠标悬停在菜单栏上时内容向下移动，您可以为内容添加一个负的上边距以将其向上移动菜单栏展开的相同量。菜单栏需要一个 z-index 值才能将其移动到内容上。

active show

$("#menubar li.dropdown").hover(function () {
    $(this).addClass("active show");
    $("#firstContent").addClass("mt-n15");
},
    function () {
        $(this).removeClass("active show");
        $("#firstContent").removeClass("mt-n15");
    });
$("#menubar ul.dropdown-menu>li>a").on("click", function (e) {
    $("#menubar li.dropdown").removeClass("active show");
    $("#firstContent").removeClass("mt-n15");
});

导航栏菜单在小屏幕上没有垂直对齐，汉堡菜单的位置

1 个答案:

更新

更新 2