подменю bootstrap и левый зазор

Question

Чтобы создать подменю в 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%. он работает, чтобы устранить пробел, но я бы предпочел решение, которое сохраняет естественную ширину подменю.

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/