Question

在bootstrap v2中创建一个子菜单，子菜单出现在主菜单的右侧，手册建议使用.pull-left，但似乎在这种情况下，子菜单的渲染偏移量至少等于主菜单宽度。如果子菜单不够宽，则子菜单和主菜单之间会有间隙。

<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％。它可以消除差距，但我更喜欢一种能够保持子菜单自然宽度的解决方案。

Answer 1

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

.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/

bootstrap子菜单和左拉差距

1 个答案: