Question

我正在尝试用Wordpress（Navwalker）编写一个自举下拉菜单 - 在桌面上它运行得很好。 enter image description here 但是在移动设备上，下拉列表在菜单项下没有对齐..它将它推到一边。

以下是菜单的HTML

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                 <ul id="menu-primary" class="nav">
<li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-4 current_page_item current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-82 dropdown active"><a title="Willkommen" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Willkommen <span class="caret"></span></a>

<ul role="menu" class=" dropdown-menu">
    <li id="menu-item-81" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-4 current_page_item menu-item-81 active"><a title="Menu Drop 1" href="#">MENU</a></li>
    <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a title="" href="#">Menu Drop 2</a></li>
    <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a title="" href="#">Menu Drop 3</a></li>
    <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43"><a title="" href="#">Menu Drop 4</a></li>
</ul>
</li>
</ul>
</ul>
</div>

桌面CSS

    .navbar .navbar-nav ul>li {
    display: inline-block;
}

    ul.nav li.dropdown:hover > ul.dropdown-menu{
    display: block;
    margin: 0;
}

.navbar .navbar-nav ul.dropdown-menu {
    margin-top: 0px;
    padding-bottom: 10px;
}
.navbar .navbar-nav ul.dropdown-menu>li{
    display: block;
    margin: 0 10px;
}

＆LT; 767px

.navbar .navbar-collapse ul {
        height: auto;
        line-height: initial;
        margin-top: 5px;
        margin-bottom: 15px;
    }

    .navbar .navbar-collapse ul>li {
        display: block;
        margin: 0 40px;
    }

    ul.nav li.dropdown:hover > ul.dropdown-menu{
        display: block;
        margin: auto;
        position: inherit;
    }

我无法粘贴你所有的CSS，因为它会使我的帖子重载... 如果有重要的遗漏，我会发布它。

Bootstrap Dropdown表现得很奇怪

0 个答案: