引导子菜单和拉左间隙答案

【问题标题】：bootstrap submenu and pull-left gap引导子菜单和拉左间隙
【发布时间】：2014-07-23 23:10:46
【问题描述】：

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

【问题讨论】：

标签： twitter-bootstrap submenu

【解决方案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/

【讨论】：