0

要在 bootstrap v2 中制作子菜单，子菜单出现在主菜单的右侧，手册建议使用 .pull-left，但似乎在这种情况下，子菜单的呈现偏移量至少等于主菜单宽度。如果子菜单不那么宽，则子菜单和主菜单之间存在间隙。

见http://jsfiddle.net/5BUXu/1/

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something that is a really really really long string here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu pull-left"> <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">shorter things</a></li>
        <li><a tabindex="-1" href="#">shorter things</a></li>
        <li><a tabindex="-1" href="#">shorter things</a></li>
    </ul>
</li>

是否有可能消除差距？

我尝试的一个 hacky 解决方法是将子菜单 ul 元素的宽度设置为 100%。它可以消除差距，但我更喜欢保持子菜单自然宽度的解决方案。

4

1 回答 1

2

当下拉菜单比子菜单更宽时，我遇到了同样的问题。问题是子菜单的位置是从左侧计算的，所以我这样修复它：

.left-submenu {
    float: none;
}

.left-submenu > .dropdown-menu {
    border-radius: 6px 0px 6px 6px;
    left: auto;
    margin-left: 10px;
    right: 98%;
}

使用.left-submenu类而不是.pull-left下拉子菜单将解决您的问题。你可以在这里看到它：http: //jsfiddle.net/5BUXu/5/

于 2014-07-23T15:10:46.447 回答